Home > Article > Web Front-end > Jquery EasyUI implements the method of displaying checkbox on treegrid and taking the selected value_jquery
Jquery EasyUI implements the method of displaying checkbox on treegrid and taking the selected value_jquery
First put the final rendering:
Then the code:
html file:
<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>
Description: There is no content, title, and then a table. I put a button consle for some testing, no need Just delete it, of course you need to quote several js files and css files:
<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>
Then the js file:
$(function(){ $('#test').treegrid({ url:"data/treegrid_data.json", idField:'id', treeField:'name', animate:"true", rownumbers:"true", columns:[[ {title:'Task Name',field:'name',formatter:function(value,rowData,rowIndex){ return " " + rowData.name; },width:180}, {field:'size',title:'Persons',width:60,align:'right'}, {field:'date',title:'Begin Date',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_",'')+','; }) alert(idList); } function consleclick(){ var node = $('#test').treegrid('expandAll',2); }
Explanation: The treegrid of easyUI is called, in order to display the checkbox , made a formatter for the first column, and bound the event of getting the selected checkbox to show the effect. You can remove it if it is not needed, or you can remove the alert and change it to other event processing functions.
Finally, attach the data json file:
[{ "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" }] }] }]
Note:
This json is downloaded directly from the official website and can be seen everywhere, or it can be changed to url.
The above is the content of Jquery EasyUI's method of displaying checkbox and taking selected value on treegrid_jquery. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!