집 > 기사 > 웹 프론트엔드 > Jquery EasyUI는 treegrid에 확인란을 표시하고 선택한 value_jquery를 가져오는 방법을 구현합니다.

Jquery EasyUI는 treegrid에 확인란을 표시하고 선택한 value_jquery를 가져오는 방법을 구현합니다.

PHP中文网원래의: 2016-05-16 15:02:552476검색

Jquery EasyUI는 treegrid에 체크박스를 표시하고 선택된 값_jquery를 가져오는 방법을 구현합니다.

먼저 최종 렌더링을 넣습니다.

다음 코드:

html 파일:

<body>
<h1>TreeGrid</h1>
<div>
<a id="consle" href="#">consle</a>
</div>
<table id="test" title="Folder Browser" style="width:400px;height:300px" > 
</table> 
</body>

설명: 내용, 제목, 테이블이 없습니다. 테스트를 위해 버튼 콘솔을 넣었으므로 삭제할 필요가 없습니다. 물론 여러 js 파일과 css 파일을 인용해야 합니다:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="jquery,ui,easy,easyui,web">
<meta name="description" content="easyui help you build your web page easily!">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="ws.js"></script>

그런 다음 js 파일:

$(function(){
$(&#39;#test&#39;).treegrid({ 
url:"data/treegrid_data.json", 
idField:&#39;id&#39;, 
treeField:&#39;name&#39;, 
animate:"true",
rownumbers:"true",
columns:[[ 
{title:&#39;Task Name&#39;,field:&#39;name&#39;,formatter:function(value,rowData,rowIndex){
return " " + rowData.name;
},width:180}, 
{field:&#39;size&#39;,title:&#39;Persons&#39;,width:60,align:&#39;right&#39;}, 
{field:&#39;date&#39;,title:&#39;Begin Date&#39;,width:80}
]] 
});
$("#consle").bind("click",consleclick)
});
function set_power_status(){ 
var idList = ""; 
$("input:checked").each(function(){
var id = $(this).attr("id");
if(id.indexOf("ceshi_")>-1)
idList += id.replace("ceshi_",&#39;&#39;)+&#39;,&#39;;
})
alert(idList);
}
function consleclick(){
var node = $(&#39;#test&#39;).treegrid(&#39;expandAll&#39;,2);
}

설명: easyUI의 treegrid가 호출됩니다. 확인란을 표시하고 첫 번째 열에 대한 포맷터를 만든 다음 선택한 확인란을 가져오는 이벤트를 바인딩하여 효과를 표시할 수 있습니다. 필요하지 않으면 제거하거나 경고를 제거하고 다른 이벤트 처리 기능으로 변경할 수 있습니다. .

마지막으로 데이터 json 파일을 첨부합니다.

[{
"id":1,
"name":"C",
"size":"",
"date":"02/19/2010",
"children":[{
"id":2,
"name":"Program Files",
"size":"120 MB",
"date":"03/20/2010",
"children":[{
"id":21,
"name":"Java",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":211,
"name":"java.exe",
"size":"142 KB",
"date":"01/13/2010"
},{
"id":212,
"name":"jawt.dll",
"size":"5 KB",
"date":"01/13/2010"
}]
},{
"id":22,
"name":"MySQL",
"size":"",
"date":"01/13/2010",
"state":"closed",
"children":[{
"id":221,
"name":"my.ini",
"size":"10 KB",
"date":"02/26/2009"
},{
"id":222,
"name":"my-huge.ini",
"size":"5 KB",
"date":"02/26/2009"
},{
"id":223,
"name":"my-large.ini",
"size":"5 KB",
"date":"02/26/2009"
}]
}]
},{
"id":3,
"name":"eclipse",
"size":"",
"date":"01/20/2010",
"children":[{
"id":31,
"name":"eclipse.exe",
"size":"56 KB",
"date":"05/19/2009"
},{
"id":32,
"name":"eclipse.ini",
"size":"1 KB",
"date":"04/20/2010"
},{
"id":33,
"name":"notice.html",
"size":"7 KB",
"date":"03/17/2005"
}]
}]
}]

참고:

이 json은 공식 웹사이트에서 직접 다운로드되며 어디에서나 볼 수 있습니다. URL로 변경되었습니다.

위 내용은 Jquery EasyUI가 treegrid_jquery에서 체크박스를 표시하고 선택된 값을 가져오는 방식에 대한 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!

성명：

이전 기사：js는 모바일 클라이언트 브라우저 type_javascript 기술을 기반으로 공식 웹사이트/모바일 웹사이트로 이동하기 위한 여러 인스턴스 코드를 결정합니다.다음 기사：js는 모바일 클라이언트 브라우저 type_javascript 기술을 기반으로 공식 웹사이트/모바일 웹사이트로 이동하기 위한 여러 인스턴스 코드를 결정합니다.

Jquery EasyUI는 treegrid에 확인란을 표시하고 선택한 value_jquery를 가져오는 방법을 구현합니다.

관련 기사