easyui+treegrid实现繁琐的小功能
分页+多选
<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>
