【转】修改适用于layui2.0框架的树形下拉表格treegrid

原文地址：https://www.cnblogs.com/hustsay23/p/8392323.html

组件下载地址：https://files.cnblogs.com/files/hustsay23/layui2.0_treegrid.rar

示例：

<div id="menu_table" style="padding-top:10px;">            
 </div>

表格模版

<script id="menuTableTpl" type="text/html">
        <table class="layui-table">
            <col width="160px" />
            <col width="80px" />
            <col width="160px" />
            <col width="120px" />                    
            <col width="60px" />
            <col width="80px" />
            <col width="200px" />
            <col width="300px" />
            <thead>
                <tr>                    
                    <th>菜单名称</th>
                    <th>菜单ID</th>
                    <th>上级菜单</th>
                    <th>图标</th>
                    <th>类型</th>
                    <th>排序号</th>
                    <th>菜单URL</th>
                    <th>授权标识</th>
                </tr>
            </thead>
            <tbody>
                {{# layui.each(d.rows,function(index,r){ }}
                <tr>                    
                    <td><input type="checkbox" />{{r.menuname}}</td>
                    <td>{{r.menuid}}</td>
                    <td>{{r.parentmenuname || ''}}</td>
                    <td>{{r.icon || ''}}</td>
                    <td>
                        {{#  if(r.menutype == 0){ }}
                             <span class="layui-btn layui-btn-xs layui-bg-blue">目录</span>
                        {{#  } }} 
                        {{#  if(r.menutype == 1){ }}
                             <span class="layui-btn layui-btn-xs layui-bg-green">菜单</span>
                        {{#  } }} 
                        {{#  if(r.menutype == 2){ }}
                             <span class="layui-btn layui-btn-xs layui-bg-orange">按钮</span>
                        {{#  } }} 
                    </td>
                    <td>{{r.orderflag || ''}}</td>
                    <td>{{r.url || ''}}</td>
                    <td>{{r.authcodegroup || ''}}</td>
                </tr>
                {{# }); }}
            </tbody>
        </table>
    </script>

表格查询JS脚本

<script type="text/javascript">   
        var tree1;
          
        //菜单列表
        var g_menu = <%= GetJSON_MenuList() %>;

        layui.config({ base: '../../Scripts/Layui/extend/' }).use(['element','laytpl', 'treegrid'], function () {
            
            var laytpl = layui.laytpl,
                treegrid = layui.treegrid;
            treegrid.config.render = function (viewid, data) {
                var view = document.getElementById(viewid).innerHTML;
                return laytpl(view).render(data) || '';
            };


           tree1=treegrid.createNew({
                elem: 'menu_table',
                view: 'menuTableTpl',
                data: { rows: g_menu },
                id:'menuid',
                parentid: 'parentmenuid',
                singleSelect: true
            });
            tree1.build();

        });
</script>