修改適用於layui2.0框架的樹形下拉表格treegrid

原做者目前已經中止對該組件的更新，可是由於適合於Layui風格，而且暫時layui的組件尚未實現該功能，因此稍微修改了下適用於最新的layui2.0框架

該源碼總共兩個組件,grid 和 treegrid  代碼主要修改了分頁，以前的分頁函數已經不適用。另外修改了Ajax請求的類型參數，改爲post傳輸以及經過json格式傳輸參數數據。

首先是展現grid功能

示例：

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

表格和分頁DIV

 

   <script id="itemTableTpl" type="text/html">
        <table class="layui-table">
            <col width="300px" />
            <col width="80px" />
            <col width="300px" />
            <col width="400px" />                    
            <col width="100px" />                      
            <thead>
                <tr>                    
                    <th>角色名稱</th>
                    <th>角色ID</th>
                    <th>所屬公司</th>
                    <th>備註</th>
                    <th>建立時間</th>                   
                </tr>
            </thead>
            <tbody>
                {{# layui.each(d.rows,function(index,r){ }}
                <tr>                    
                    <td><input type="checkbox" />{{r.rolename}}</td>
                    <td>{{r.roleid}}</td>
                    <td>{{r.companyname || ''}}</td>
                    <td>{{r.remark || ''}}</td>                    
                    <td>{{r.createdwhenfmt}}</td>
                </tr>
                {{# }); }}
            </tbody>
        </table>
    </script>

表格模版

 

 <script type="text/javascript">
         var tree1;
         var treegrid;

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

                 var search_rolename = $("#rolename").val();

                 var options = {
                     elem: 'data_table',
                     view: 'itemTableTpl',
                     url: 'Role.aspx/GetList',
                     searchData: { "rolename": search_rolename, page: 1, pageSize: 4 },
                     rowid: 'roleid',
                     page: 1,
                     pageSize: 4,
                     record: true,
                     singleSelect: true,
                     pagerID: 'data_pager'
                 };

                 tree1 = treegrid.createNew(options);
                 tree1.build();

             });  
            
         }             
        </script>

GRID的腳本代碼

 

其次是樹形表格：

示例：

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

表格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>

表格模版

 

 <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>

表格查詢JS腳本

 

主要參數仍是參考原做者的文檔，地址：http://www.layuispa.com/

我簡單修改後的源碼下載地址：https://files.cnblogs.com/files/hustsay23/layui2.0_treegrid.rar