JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 21:49:49

JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery:Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery先放個最終的效果圖：然后是代碼：html文件：<body> <h1>TreeGrid</h1> <div> <a id="consle" href=&quo

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery:Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery先放個最終的效果圖：然后是代碼：html文件：<body> <h1>TreeGrid</h1> <div> <a id="consle" href=&quo

Jquery EasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

先放個最終的效果圖：

然后是代碼：

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

接著是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方式。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽： easy easyUI jQuery

熱門焦點(diǎn)

JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

JqueryEasyUI實(shí)現(xiàn)treegrid上顯示checkbox并取選定值的方法_jquery

最新推薦

猜你喜歡

熱門推薦