项目说明,要一个有权限并且按需加载的树形列表.

jeasyui网址

CSS

<!--添加树状控件-->
<link rel="stylesheet" type="text/css" href="../js/GridTree/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../js/GridTree/themes/default/serviceTesting1.css">

HTML

<div id="tableMain">
<table class="easyui-treegrid" id="funTreeList" style="width: 100% !important;"></table>
</div>

JS

<!--treeGrid树状插件-->
<script type="text/javascript" src="../js/GridTree/jquery.easyui.min.js"></script> //找到自己的文件目录 <script>
  
function GetModuleTree(){
$.ajax({
type: "get",
url: durl+"ServicePrice/GetSystemModulePriceTree",
data: {},
cache: false,
success: function (d) {
var data = d.data;
$('#funTreeList').treegrid({
fit: true,
toolbar: '#toolbar',
striped: true,
rownumbers: false, //设置为true,则显示带有行号的列
lines:true, //是否出现线条
fitColumns:true, //设置为true,则会自动扩大或缩小列的尺寸以适应网格的宽度并且防止水平滚动。
data: data, //加载的数据 (此数据为父级和子集的全部数据)
idField:'ModuleID', //指示那个字段是标识字段
treeField:'ModuleName', //定义树节点的字段
loadFilter: myLoadFilter, //最主要的方法 过滤数据
onLoadSuccess: function (row) {
          $('#funTreeList').treegrid('collapseAll')
obj.q(); //权限
closeload();
},
columns:[[
{field:'ModuleName',title:'功能名称',width:200},
{field:'ModuleSort',title:'功能序号',width:40},
{field:'ModuleID',title:'功能ID',width:40},
{field:'ModuleIndustry',title:'适用行业',width:60},
{field:'ModuleRemark',title:'功能简介',width:100,formatter:ModuleRemark},
{field:'IsMenu',title:'首页菜单',align:'center', width:40,formatter:IsMenu},
{field:'priceType',title:'定价点',align:'center', width:150,formatter:priceType},
{field:'btns',title:'操作',align:'center',width:270,formatter:formatOper}
]]
   });
},
error: function (a, b, c) {
closeload();
alert("请求服务器出现错误");
}
});
}
//按需加载子节点
function myLoadFilter(data,parentId){
function setData(data){//重新整理数据的children属性
var todo = [];
for(var i=0; i<data.length; i++){
todo.push(data[i]);//数组末端添加 将源数据添加到数组中便于后续利用
} while(todo.length){
var node = todo.shift();//方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
if (node.children){//如果有子节点
node.state = 'closed';
node.children1 = node.children;
node.children = undefined;
todo = todo.concat(node.children1);//数组联结
       }
}
}
setData(data);
var tg = $(this);//当前页面
var opts = tg.treegrid('options');//获取属性表格的属性对象
//节点展开前执行的方法 row是行数据
  opts.onBeforeExpand = function(row){
if (row.children1){
tg.treegrid('append',{
parent: row[opts.idField],//父节点id
data: row.children1//节点数据
});
row.children1 = undefined;
}
obj.q(); //权限
return row.children1 == undefined;
};
return data;
}
</script>

Jquery EasyUI Treegrid按需加载子集的更多相关文章

  1. jquery easyui easyui-treegrid 使用异步加载数据

    jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...

  2. easyui combogrid 按需加载,点击下拉加载

    功能优点:减少不必要的http请求,减少服务器查询压力,降低额外的浏览器渲染,提高呈现速度开发分享: combogrid 点击才请求的功能实现简要:我分析了费用系统,和现在全网的写法.并不满意.都是要 ...

  3. jQuery easyui datagrid 的数据加载

        其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...

  4. Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)

    private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationM ...

  5. jquery easyui:tab自动加载第一个tab内容

    $('#resourceTabs').tabs('unselect', 0);$('#resourceTabs').tabs('select', 0);

  6. jqGrid -treeGrid 按需加载

    Load Rows On Demand (AJAX) 参考:http://www.guriddo.net/demo/treegridjs/

  7. [转载]再次谈谈easyui datagrid 的数据加载

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  8. 谈谈easyui datagrid 的数据加载(转)

    这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...

  9. 再次谈谈easyui datagrid 的数据加载

    from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...

随机推荐

  1. GCC 4.7相对4.6.x的改进点

    原文:http://www.iteye.com/news/24628针对C的功能改进: 支持ISO C11标准中的更多特性.除了之前的-std=c1x和-std=gnu1x选项外,GCC现在还支持-s ...

  2. 编写高质量代码改善C#程序的157个建议——建议49:在Dispose模式中应提取一个受保护的虚方法

    建议49:在Dispose模式中应提取一个受保护的虚方法 在标准的Dispose模式中,真正的IDisposable接口的Dispose方法并没有做实际的清理工作,它其实是调用了下面的这个带bool参 ...

  3. 编写高质量代码改善C#程序的157个建议——建议41:实现标准的事件模型

    建议41:实现标准的事件模型 上一建议中,我们实现了一个带事件通知的文件传输类FileUploader.虽然已经满足需求,但却不符合C#的编码规范,查看EventHandler的原型声明: publi ...

  4. 20169219 TCP_IP网络协议攻击实验报告

    (1) ARP缓存欺骗 RP 缓存是 ARP 协议的重要组成部分.ARP 协议运行的目标就是建立 MAC 地址和 IP 地址的映射,然后把这一映射关系保存在 ARP 缓存中,使得不必重复运行 ARP ...

  5. Js杂谈-插件包读后感

    最近有幸得到了一份项目上的前端封装的插件库代码,花了一个下午时间,仔细地研读了一下.对于我很想做自己的类库,搞自己的组件包很有启蒙意义. 相比较我之前阅过的框架或是类库,这份比较简单. 项目是jQue ...

  6. Bitnami WordPress如何修改MySQL root的默认密码?

    Bitnami WordPress安装完毕后,MySQL root的默认密码为空,我们应该马上修改MySQL密码,在开始菜单里面,进入Bitnami ,启动控制台程序,随后输入: mysql -u r ...

  7. sysbase 笔记

    Alter 在已有数据的表中新增一个字段: ALTER table ciecdb.ciec.eci_mansmfile ADD num int default 0;

  8. easyui打开dialog后给弹出框内输入框赋值问题

    在写一个弹出页面的时候,里面有一些输入框,需要在弹出的时候从数据库取值并且赋值,刚开始在弹出的时候使用$(id).val(value),结果赋值失败,为空当时纠结了一会,然后突然想到在easyui打开 ...

  9. Communication with each role instance in Azure

    Use WCF  Communication with role instance in azure 1)In worker role build WCF Service public overrid ...

  10. 查看 tensorflow 是GPU版本 还是CPU版本

    在Python环境中输入: import os from tensorflow.python.client import device_lib os.environ["TF_CPP_MIN_ ...