分頁+多選
<html>
<head>
<title>treegrid</title>
<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>
<script type="text/javascript">
$(function() {
/*初始化時加載內容*/
$('#treeTable')
.treegrid(
{
url : 'ajaxSafePolicyListNew.action?pageNumber='+1+'&pageSize='+20, // 地址
idField : 'id', // 標識樹節點的鍵名
treeField : 'name', // 標識節點的字段
loadMsg : '正在加載策略...',// 加載時的提示信息
fitColumns : false, // 自適應
striped : true, //隔行變色
pagination : true,//頁面底部分頁小工具
pageSize : 20,//初始化每頁顯示的記錄數量
pageNumber : 1,//初始化顯示頁碼數
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 : '服務'
},
{
field : 'facilityState',
title : '設備狀態',
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}"
});
/*設置加載分頁*/
$('#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;
//如果是子節點
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);
//如果是父節點
} 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);
}
}
}
}
}
</script>
</head>
<body>
<table id="treeTable"
style="width: 90%; height: 90%;">
</table>
</body>
</html>