Jquery EasyUI implementiert die Methode zum Anzeigen von Kontrollkästchen im Baumgitter und zum Übernehmen des ausgewählten Werts

Jquery EasyUI implementiert die Methode zum Anzeigen von Kontrollkästchen im Baumgitter und zum Übernehmen des ausgewählten Werts_jquery

PHP中文网

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

Original

2476 Leute haben es durchsucht

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

Stellen Sie zunächst das endgültige Rendering ein:

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

Beschreibung: Es gibt keinen Inhalt, keinen Titel und dann eine Tabelle. Ich habe zum Testen eine Schaltfläche hinzugefügt, die nicht benötigt wird. Einfach löschen Dazu müssen Sie natürlich mehrere JS-Dateien und CSS-Dateien zitieren:

<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

Dann die JS-Datei:

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

Erklärung: Das Treegrid von easyUI wird aufgerufen, um Zeigen Sie das Kontrollkästchen an, erstellen Sie einen Formatierer für die erste Spalte und binden Sie das Ereignis zum Abrufen des ausgewählten Kontrollkästchens, um den Effekt anzuzeigen. Sie können es entfernen, wenn es nicht benötigt wird, oder Sie können die Warnung entfernen und in andere Ereignisverarbeitungsfunktionen ändern .

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

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

Hinweis:

Diese JSON wird direkt von der offiziellen Website heruntergeladen und ist überall zu sehen oder kann es auch sein in URL geändert.

Das Obige ist der Inhalt der Methode von Jquery EasyUI zum Anzeigen von Kontrollkästchen und zum Übernehmen ausgewählter Werte in treegrid_jquery. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).