Heim > Artikel > Web-Frontend > Jquery EasyUI implementiert die Methode zum Anzeigen von Kontrollkästchen im Baumgitter und zum Übernehmen des ausgewählten Werts_jquery

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

PHP中文网Original: 2016-05-16 15:02:552476Durchsuche

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>

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>

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

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：js bestimmt mehrere Instanzcodes, um zur offiziellen Website/mobilen Website zu springen, basierend auf den Typ_Javascript-Fähigkeiten des Browsers des mobilen ClientsNächster Artikel：js bestimmt mehrere Instanzcodes, um zur offiziellen Website/mobilen Website zu springen, basierend auf den Typ_Javascript-Fähigkeiten des Browsers des mobilen Clients

In Verbindung stehende Artikel

Mehr sehen