Jquery EasyUI Treegrid按需加载子集
项目说明,要一个有权限并且按需加载的树形列表.
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按需加载子集的更多相关文章
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- easyui combogrid 按需加载,点击下拉加载
功能优点:减少不必要的http请求,减少服务器查询压力,降低额外的浏览器渲染,提高呈现速度开发分享: combogrid 点击才请求的功能实现简要:我分析了费用系统,和现在全网的写法.并不满意.都是要 ...
- jQuery easyui datagrid 的数据加载
其实easyuidatagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数据:另一种是加载js对象,也就是使用loadDate方法,这种方法用于加载本地js数据(非ur ...
- Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
private void SMT(HttpContext context) { string SqlConnection82 = System.Configuration.ConfigurationM ...
- jquery easyui:tab自动加载第一个tab内容
$('#resourceTabs').tabs('unselect', 0);$('#resourceTabs').tabs('select', 0);
- jqGrid -treeGrid 按需加载
Load Rows On Demand (AJAX) 参考:http://www.guriddo.net/demo/treegridjs/
- [转载]再次谈谈easyui datagrid 的数据加载
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 谈谈easyui datagrid 的数据加载(转)
这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实easyui datagrid加载数据只有两种方式:一种是ajax加载目标url返回的json数 ...
- 再次谈谈easyui datagrid 的数据加载
from:http://www.easyui.info/archives/204.html 这篇文章只谈jQuery easyui datagrid 的数据加载,因为这也是大家谈论最多的内容.其实ea ...
随机推荐
- GCC 4.7相对4.6.x的改进点
原文:http://www.iteye.com/news/24628针对C的功能改进: 支持ISO C11标准中的更多特性.除了之前的-std=c1x和-std=gnu1x选项外,GCC现在还支持-s ...
- 编写高质量代码改善C#程序的157个建议——建议49:在Dispose模式中应提取一个受保护的虚方法
建议49:在Dispose模式中应提取一个受保护的虚方法 在标准的Dispose模式中,真正的IDisposable接口的Dispose方法并没有做实际的清理工作,它其实是调用了下面的这个带bool参 ...
- 编写高质量代码改善C#程序的157个建议——建议41:实现标准的事件模型
建议41:实现标准的事件模型 上一建议中,我们实现了一个带事件通知的文件传输类FileUploader.虽然已经满足需求,但却不符合C#的编码规范,查看EventHandler的原型声明: publi ...
- 20169219 TCP_IP网络协议攻击实验报告
(1) ARP缓存欺骗 RP 缓存是 ARP 协议的重要组成部分.ARP 协议运行的目标就是建立 MAC 地址和 IP 地址的映射,然后把这一映射关系保存在 ARP 缓存中,使得不必重复运行 ARP ...
- Js杂谈-插件包读后感
最近有幸得到了一份项目上的前端封装的插件库代码,花了一个下午时间,仔细地研读了一下.对于我很想做自己的类库,搞自己的组件包很有启蒙意义. 相比较我之前阅过的框架或是类库,这份比较简单. 项目是jQue ...
- Bitnami WordPress如何修改MySQL root的默认密码?
Bitnami WordPress安装完毕后,MySQL root的默认密码为空,我们应该马上修改MySQL密码,在开始菜单里面,进入Bitnami ,启动控制台程序,随后输入: mysql -u r ...
- sysbase 笔记
Alter 在已有数据的表中新增一个字段: ALTER table ciecdb.ciec.eci_mansmfile ADD num int default 0;
- easyui打开dialog后给弹出框内输入框赋值问题
在写一个弹出页面的时候,里面有一些输入框,需要在弹出的时候从数据库取值并且赋值,刚开始在弹出的时候使用$(id).val(value),结果赋值失败,为空当时纠结了一会,然后突然想到在easyui打开 ...
- Communication with each role instance in Azure
Use WCF Communication with role instance in azure 1)In worker role build WCF Service public overrid ...
- 查看 tensorflow 是GPU版本 还是CPU版本
在Python环境中输入: import os from tensorflow.python.client import device_lib os.environ["TF_CPP_MIN_ ...