站长资源
中国站长网站

layui组件treeGrid之自定义异步读取数据格式

最近做权限系统,因为前端选择的是layui框架,所以也就找了个layui官方推荐权限树组件treeGrid ,因为作者并没有文档提供查看,使用中遇到不少问题,记录下来分享给大家。

当然你数据封装的和官方示例的一模一样,自然不会有问题,可是很多情况下,前端人员并不会写后端的接口,或者接口的规范和官方的不同,那么要怎么处理?

比如我需要传递token值,这个一般通常会放在header里面,我还需要传递一些其他参数,而且我的数据节点并不是data,下面通过代码注释给大家讲解

moduletable=treeGrid.render({
	id:'moduleTable'
	,elem: '#moduleTable'
	,url:'xxxxxx'//接口地址
	,cellMinWidth: 100
	,idField:'id'//必須字段
	,treeId:'id'//树形id字段名称
	,headers:{'TOKEN': 'aaa'}//在headers中传递token
        ,where:{id2:xxx}//其要传递的条件
	,treeUpId:'parentId'//树形父id字段名称
	,treeShowName:'aclModuleName'//以树形式显示的字段
	,height:'100%'
	,isFilter:false
	,iconOpen:true//是否显示图标【默认显示】
	,isOpenDefault:true//节点默认是展开还是折叠【默认展开】
	,loading:true
	,method:'get'
	,isPage:false
	,response:{ 
		dataName:'datas',//自定义数据,这个官方是data
		statusCode:200 //自定义code码
	}
	,cols: [[
		{type:'checkbox'}
		,{field:'aclModuleName', width:200, title: '模块名',edit:'text'}
		,{field:'id',width:50, title: 'id'}
		,{field:'parentId',width:100 ,title: 'pid'}
		,{width:100,title: '操作', align:'center'/*toolbar: '#barDemo'*/
			,templet: function(d){
				var html='';
				var addBtn='<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">添加</a>';
				var delBtn='<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
				return addBtn+delBtn;
			}
		}
	]]
	,parseData:function (res) {//数据加载后回调

	}
	,onClickRow:function (index, o) {

	}
});

本文出处:来自互联网信息共享,请勿相信收费信息站长资源 » layui组件treeGrid之自定义异步读取数据格式

评论 抢沙发

评论前必须登录!