頁面表格
<table id="treeTable"
style="width: 90%; height: 90%;">
</table>
引入js苹威，css等
<link rel="stylesheet" type="text/css"
href="/MgmtCenter/resource/jquery-easyui-1.4.3/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
href="/MgmtCenter/resource/jquery-easyui-1.4.3/themes/icon.css">
<script language="javascript"
src="/MgmtCenter/device/js/jquery-1.8.3.min.js"></script>
<script language="javascript"
src="/MgmtCenter/resource/jquery-easyui-1.4.3/jquery.easyui.min.js"></script>
初始化加載
$(function() {
$('#treeTable')
.treegrid(
{
url : 'ajaxSafePolicyListNew.action?pageNumber='+1+'&pageSize='+20, // 地址
idField : 'id', // 標識樹節(jié)點的鍵名
treeField : 'name', // 標識節(jié)點的字段
loadMsg : '正在加載策略...',// 加載時的提示信息
fitColumns : false, // 自適應(yīng)
striped : true, //隔行變色
pagination : true,//頁面底部分頁小工具
pageSize : 20,//初始化每頁顯示的記錄數(shù)量
pageNumber : 1,//初始化顯示頁碼數(shù)
columns : [ [
{
field : 'id',
formatter : function(value, row, index) {
return "<input id="
+ value
+ " type=\"checkbox\" onclick=\"checkRow(id);\">";
}
},
{
field : 'name',
width : '15%',
title : '名稱',
formatter : function(value, row, index) {
//alert("aaaaaaaaaaaa:" + value + "|" + row + "|" + index);
return value;
}
},
{
field : 'motion',
title : '動作'
},
{
field : 'from',
width : '15%',
title : '源地址'
},
{
field : 'to',
width : '15%',
title : '目的地址'
},
{
field : 'date',
width : '10%',
title : '日期'
},
{
field : 'serve',
width : '10%',
title : '服務(wù)'
},
{
field : 'facilityState',
title : '設(shè)備狀態(tài)',
width : '10%'
},
{
field : 'operation',
title : '操作',
width : '20%',
formatter : function(value, row, index) {
//alert("aaaaaaaaaaaa:" + value + "|" + row + "|" + index);
return "<a href='#'"
+ "style='color: blue;'? onclick='updateById('\""
+ value
+ "\"');'>"
+ "編輯</a> "
+ "<a href='#'"
+ "style='color: blue;'? onclick='updateById('\""
+ value + "\"');'>"
+ "刪除</a>";
}
} ] ]
});
編輯頁面底部的工具欄組件
var p = $('#treeTable').datagrid('getPager').pagination({
beforePageText : "第",
afterPageText : "頁勃救，共{pages}頁",
displayMsg : "{from}到{to}"
});
設(shè)置加載分頁
$('#treeTable').treegrid('getPager').pagination({
onSelectPage : function(pageNumber,pageSize){
$('#treeTable').treegrid('options').url='ajaxSafePolicyListNew.action?pageNumber='+pageNumber+'&pageSize='+pageSize;
$('#treeTable').treegrid('reload');
}});
單選多反選checkbox邏輯?
function checkRow(id) {
$('#' + id).parent().parent().parent().parent().parent().css("bgcolor",
"blue");
var children = $('#treeTable').treegrid('getChildren', id);
var state = true;
//如果是子節(jié)點
if (children.length == 0) {
var parent = $('#treeTable').treegrid('getParent', id);
children = $('#treeTable').treegrid('getChildren', parent.id);
for (var i = 0; i < children.length; i++) {
if ($('#' + children[i].id).prop("checked") == false) {
state = false;
}
}
$('#' + parent.id).prop("checked", state);
//如果是父節(jié)點
} else {
for (var i = 0; i < children.length - 1; i++) {
if ($('#' + children[i].id).prop("checked") != $(
'#' + children[i + 1].id).prop("checked")) {
state = false;
}
}
if (state == false) {
for (var i = 0; i < children.length; i++) {
$('#' + children[i].id).prop("checked", true);
}
} else {
if ($('#' + children[0].id).prop("checked") == false) {
for (var i = 0; i < children.length; i++) {
$('#' + children[i].id).prop("checked", true);
}
} else {
for (var i = 0; i < children.length; i++) {
$('#' + children[i].id).prop("checked", false);
}
}
}
}
}
撒花
