Rumah > Artikel > hujung hadapan web > Jquery EasyUI melaksanakan kaedah memaparkan kotak semak pada treegrid dan mengambil nilai_jquery yang dipilih

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

PHP中文网asal: 2016-05-16 15:02:552474semak imbas

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>

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>

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

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

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)!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js menentukan berbilang kod contoh untuk melompat ke tapak web rasmi/tapak web mudah alih berdasarkan kemahiran jenis_javascript pelayar klien mudah alihArtikel seterusnya：js menentukan berbilang kod contoh untuk melompat ke tapak web rasmi/tapak web mudah alih berdasarkan kemahiran jenis_javascript pelayar klien mudah alih

Artikel berkaitan

Lihat lagi