Jquery EasyUI melaksanakan kaedah memaparkan kotak semak pada treegrid dan mengambil nilai

Jquery EasyUI melaksanakan kaedah memaparkan kotak semak pada treegrid dan mengambil nilai_jquery yang dipilih

PHP中文网

Lepaskan： 2016-05-16 15:02:55

asal

2474 orang telah melayarinya

Jquery EasyUI melaksanakan kaedah memaparkan kotak pilihan pada treegrid dan mengambil nilai_jquery yang dipilih

Mula-mula letakkan pemaparan terakhir:

Kemudian kod:

fail 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>

Salin selepas log masuk

Penerangan: Tiada kandungan, tajuk, dan kemudiannya jadual Saya meletakkan konsle butang untuk beberapa ujian, tidak perlu Padamkan sahaja itu, sudah tentu anda perlu memetik beberapa fail js dan fail 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>

Salin selepas log masuk

Kemudian fail 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);
}

Salin selepas log masuk

Penjelasan: Treegrid easyUI dipanggil, untuk paparkan kotak semak , buat pemformat untuk lajur pertama dan mengikat acara mendapatkan kotak semak yang dipilih untuk menunjukkan kesan Anda boleh mengalih keluarnya jika ia tidak diperlukan, atau anda boleh mengalih keluar amaran dan menukarnya kepada fungsi pemprosesan acara lain .

Akhir sekali, lampirkan fail json data:

[{
"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"
}]
}]
}]

Salin selepas log masuk

Nota:

Json ini dimuat turun terus dari tapak web rasmi dan boleh dilihat di mana-mana, atau ia boleh ditukar kepada url.

Di atas ialah kandungan kaedah Jquery EasyUI untuk memaparkan kotak semak dan mengambil nilai terpilih pada treegrid_jquery Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!