<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>
原文：https://www.cnblogs.com/ttzsqwq/p/11057688.html