Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to realize the tree table in layui+java". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to achieve a tree table in layui+java".

TreeTable module download: https://gitee.com/whvse/treetable-lay/tree/master/2.x

After downloading, the directories for treeTable.js and treeTable.css are: layuiadmin/modules/treeTable.js layuiadmin/modules/treeTable/treeTable.css

Page elements:

Definition:

Layui.config ({base:'${ctxLayui} / layuiadmin/'}) .extend ({index: 'lib/index'}) .use ([' index', 'table','dict','laydate','util','treeTable'], function () {var $= layui.$,table = layui.table,form = layui.form; var dict = layui.dict; var laydate = layui.laydate; var admin = layui.admin; var util = layui.util Var treeTable = layui.treeTable

Render:

Var insTb = treeTable.render ({elem:'# businessConfigListTable', tree: {iconIndex: 1, / / collapse icon is displayed in which column idName: 'id', / / the name of the custom id field pidName:' parentId', / / the field name of the custom identification whether there are any child nodes} Cols: [{type: 'checkbox', fixed:' left'}, {type: 'numbers',width: 120th field:' id', title: 'ID',width: 180}, {field:' type', title: 'type', width: 120th templetplType} {field: 'name', title:' name', width: 200}, {field: 'value', title:' value'}, {field: 'sortOrder', title:' sort', width: 120}, {field: 'status', title:' status', width: 150 dint templetwidth tplStatus}, {title:' operation' Toolbar:'# businessConfigListTable-bar', width:120}], reqData: function (data, callback) {/ / write the ajax request here Callback data var url = ctx+'/business/businessConfig/businessConfigTreeList' through the callback method Var rtn = admin.syncReq (url, {}); var rtnData = rtn.data; for (var item0)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.