使用Layui第三方组件“treeGrid 树形表格”修改系统的菜单管理列表

水月洞天 10月前 288

layui 第三方组件平台:treeGrid树形表格


(1)添加treeGrid扩展

在public\static\libs\layui\extend目录添加treeGrid扩展文件,需要的朋友可以下载附件。

(2)修改菜单列表视图代码(位置:application\admin\view\menu\index.html)

{extend name="index_layout"/}
{block name="main"}
<div class="layui-card">
    <div class="layui-card-header">菜单管理</div>
    <div class="layui-card-body">
        <div class="layui-form" style="height:800px;">
            
			<table class="layui-hide" id="treeTable" lay-filter="treeTable" ></table>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-danger layui-btn-normal" href="{:url('add')}">新增后台菜单</a>
	<a class="layui-btn layui-btn-normal" onclick="openAll();">展开或折叠全部</a>
  </div>
</script>
<script type="text/html" id="barTool">
    <a href='{:url("edit")}?id={{ d.id }}' class="layui-btn layui-btn-xs">编辑</a>
    <a href='{:url("add")}?parentid={{ d.id }}' class="layui-btn layui-btn-xs layui-btn-normal">添加</a>
    <a href='{:url("delete")}?id={{ d.id }}' class="layui-btn layui-btn-danger layui-btn-xs layui-tr-del">删除</a>
</script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="status" data-href="{:url('setstate')}?id={{d.id}}" value="{{d.id}}" lay-skin="switch" lay-text="显示|隐藏" lay-filter="switchStatus" {{ d.status==1 ? 'checked' : '' }}>
</script>
{/block}
{block name="script"}
<script>
var ptable = null, treeGrid = null, tableId = 'treeTable', layer = null, $ = null, form = null;
layui.config({
        base: '__STATIC__/libs/layui/extend/'
    }).extend({
        treeGrid: 'treeGrid'
	}).use(['treeGrid', 'layer'], function() {
    $ = layui.$;
	layer = layui.layer;
    form = layui.form;
	treeGrid = layui.treeGrid;
	ptable = treeGrid.render({
		id: tableId,
		elem: '#' + tableId,
		toolbar: '#toolbarDemo',
		idField: 'id',
		url: "{:url('index')}",
		cellMinWidth: 100,
		treeId: 'id',//树形id字段名称
		treeUpId: 'parentid',//树形父id字段名称
		treeShowName: 'title',//以树形式显示的字段
		height: 'full-140',
		isFilter: false,
		iconOpen: false,//是否显示图标【默认显示】
		isOpenDefault: false,//节点默认是展开还是折叠【默认展开】
		onDblClickRow: false,//去除双击事件
		cols: [[
			{field: 'listorder', align: 'center',width:60,title: '排序',edit: 'text'},
			{field: 'id', align: 'center',width:60,title: 'ID'},
			{field: 'title', title: '菜单名称',},
			{field: 'status',align: 'center', width: 120, title: '状态', templet: '#switchTpl', unresize: true },
            {fixed: 'right',align: 'center', width: 200, title: '操作', toolbar: '#barTool' }
		]],
		page: false
	});
	//监听排序单元格编辑
	treeGrid.on('edit(treeTable)', function(obj){
		var value = obj.value //得到修改后的值
		,data = obj.data //得到所在行所有键值
		,field = obj.field; //得到字段
		//layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为:'+ value);
		$.post("{:url('listorder')}", {id: data.id, 'value': value}, function (data) {
			if (data.code == 1) {
                layer.msg(data.msg);
            } else {
                layer.msg(data.msg);
            }
		});
	});
});
function openAll() {
	var treedata = treeGrid.getDataTreeList(tableId);
	treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
}
</script>
{/block}

最终效果图:

上传的附件:
最新回复 (1)
  • admin 10月前
    0 2
    不错  感谢分享!
    • YznCMS交流社区
      3
        登录 注册 QQ登录
返回