页面表格
引入js，css等
href="/MgmtCenter/resource/jquery-easyui-1.4.3/themes/default/easyui.css">
href="/MgmtCenter/resource/jquery-easyui-1.4.3/themes/icon.css">
初始化加载
$(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 "";
}
},
{
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 "
+ "style='color: blue;' onclick='updateById('\"" + value + "\"');'>" + "编辑
+ "
+ "style='color: blue;' onclick='updateById('\"" + value + "\"');'>" + "删除
}
} ] ]
});
编辑页面底部的工具栏组件
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);
}
}
}
}
}
撒花