Jquery EasyUI實現(xiàn)treegrid上顯示checkbox并取選定值的方法
先放個最終的效果圖:
然后是代碼:
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>
說明:沒什么內(nèi)容,標(biāo)題,然后是一個表格,我為了做些測試放了個按鈕consle,不用刪掉即可,當(dāng)然要引用幾個js文件和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" > <link rel="stylesheet" type="text/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>
接著是js文件:
$(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); }
說明:調(diào)用了easyUI的treegrid,為了顯示checkbox,對第一列做了個formatter,為了展示效果綁定了取得選中checkbox的事件,不用可以去掉,也可以去掉alert,更改為其他的事件處理函數(shù)。
最后附上數(shù)據(jù)json文件:
[{ "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" }] }] }]
說明:
這個json直接從官網(wǎng)down的,隨處可見,也可改為url方式。
本文非原創(chuàng)摘自:http://blog.sina.com.cn/s/blog_4782108f0101eul4.html
相關(guān)文章
jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階
這篇文章主要介紹了jQuery插件開發(fā)精品教程讓你的jQuery提升一個臺階 的相關(guān)資料,需要的朋友可以參考下2016-01-01jquery.autocomplete修改實現(xiàn)鍵盤上下鍵自動填充示例
根據(jù)需求要實現(xiàn)通過鍵盤上下移動,獲得聯(lián)想菜單中的值,如同google baidu的查詢功能,下面的代碼是自己手寫的,喜歡的朋友可以嘗試操作下2013-11-11jQuery實現(xiàn)鼠標(biāo)經(jīng)過事件的延時處理效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)鼠標(biāo)經(jīng)過事件的延時處理效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2015-10-10juqery 學(xué)習(xí)之五 文檔處理 包裹、替換、刪除、復(fù)制
這個函數(shù)的原理是檢查提供的第一個元素(它是由所提供的HTML標(biāo)記代碼動態(tài)生成的),并在它的代碼結(jié)構(gòu)中找到最上層的祖先元素--這個祖先元素就是包裹元素。2011-02-02jquery 查找select ,并觸發(fā)事件的實現(xiàn)代碼
項目中,用jquery 查找select ,并觸發(fā)事件. 記一筆.關(guān)鍵代碼,需要的朋友可以參考下。2011-03-03