Jquery EasyUI implementiert die Methode, ein Kontrollkästchen im Baumgitter anzuzeigen und den ausgewählten Wert zu übernehmen-js-Tutorial-php.cn

Jquery EasyUI implementiert die Methode, ein Kontrollkästchen im Baumgitter anzuzeigen und den ausgewählten Wert zu übernehmen

高洛峰

Freigeben： 2016-12-29 13:44:40

Original

1281 Leute haben es durchsucht

Fügen Sie zuerst das endgültige Rendering ein:

Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法

Dann den Code:

HTML-Datei:

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

Nach dem Login kopieren

Anleitung: Es gibt Kein Inhalt, ein Titel und dann eine Tabelle. Sie müssen sie nicht löschen. Natürlich muss ich mehrere JS-Dateien und CSS-Dateien zitieren 🎜>Dann js-Datei:

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

Nach dem Login kopieren

Beschreibung: Um das Kontrollkästchen anzuzeigen, wird ein Formatierer in der ersten Spalte erstellt, um den Effekt anzuzeigen Das ausgewählte Kontrollkästchen ist gebunden. Es kann entfernt werden, wenn es nicht benötigt wird. Sie können auch die Warnung entfernen und zu anderen Ereignisbehandlungsfunktionen wechseln.

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

Nach dem Login kopieren

Schließlich fügen Sie die Daten-JSON-Datei an:

Hinweis:

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

Nach dem Login kopieren

Diese JSON wird direkt von der offiziellen Website heruntergeladen und ist überall zu sehen in den URL-Modus gewechselt.

Weitere verwandte Artikel darüber, wie Jquery EasyUI die Methode implementiert, das Kontrollkästchen im Baumgitter anzuzeigen und den ausgewählten Wert zu übernehmen, finden Sie auf der chinesischen PHP-Website!