In easyUI, The treegrid component constructs a tree table (simple data type) + ssm background, easyuitreegrid
The projects made in the past few days require that a part of the data be displayed in the form of a tree table, so I thought of the treegrid component using easyUI. However, after several queries, I found that most of the data types adopt the standard data type, that is, the data type containing the children element. After several experiments, the editor found a method to display a tree table using the simple data type. This article is for your reference only:
The framework uses the ssm framework and the database uses oracle. The tables to be displayed in the database are designed as follows:
Refer to the Data Type in easyUI demo, as shown in the following format:
This is a json string, which is used to display rows and total for paging. footer is not very familiar with it, here I think that the controller layer in the background should return such a json string to the foreground and let him assemble the data. But one thing to note is that there is a _ parentId in the above data structure. After several tests, its value is our pid value. Now the problem is coming, do you need to add a corresponding field, but the table structure cannot be dynamic. In this case, I performed the following operations in the corresponding entity class:
In addition, the structure of foreground recognition can be implemented using the map set in the background, so the background is soy sauce:
You can select total and footer in the demo data structure as needed.
In the easyUI API documentation, treegrid is written as follows:
The foreground is as follows:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" PageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"> <Html> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"> <Title> dept_list.jsp </title> <Link rel = "stylesheet" type = "text/css" href = "$ {pageContext. request. contextPath}/easyUI/jquery-easyui-1.4/themes/default/easyui.css"> <Link rel = "stylesheet" type = "text/css" href = "$ {pageContext. request. contextPath}/easyUI/jquery-easyui-1.4/themes/icon.css"> <Link rel = "stylesheet" type = "text/css" href = "$ {pageContext. request. contextPath}/ztree/css/zTreeStyle/zTreeStyle.css"> <Script type = "text/javascript" src = "$ {pageContext. request. contextPath}/js/jquery-1.8.2.min.js"> </script> <Script type = "text/javascript" src = "$ {pageContext. request. contextPath}/easyUI/jquery-easyui-1.4/jquery. easyui. min. js"> </script> <Script type = "text/javascript" src = "$ {pageContext. request. contextPath}/ztree/js/jquery. ztree. all-3.5.min.js"> </script> <Script type = "text/javascript" src = "$ {pageContext. request. contextPath}/easyUI/jquery-easyui-1.4/locale/easyui-lang-zh_CN.js"> </script> <Script type = "text/javascript"> $ (Function (){ // Treegrid $ ('# Tt'). treegrid ({ Url: '$ {pageContext. request. contextPath}/user/getdeptMap. action', // access the background address IdField: 'id ', TreeField: 'name ', Columns :[[ {Field: 'xxx', title: 'xxx', width: 100, checkbox: true }, {Field: 'id', title: 'id', width: 60, align: 'center '}, {Field: 'name', title: 'name', width: 60, align: 'center '}, {Field: 'pid ', title: 'pid', width: 60, align: 'center '}, {Field: 'XX', title: 'operation', width: 100, Formatter: function (value, row, index ){ Return "<a href = 'javascript: void (0) 'onclick = 'Update (\" "+ index +" \ ") '> modify </a>" + "-" + "<A href = 'javascript: void (0) 'onclick = 'del (\" "+ row. id +" \ ") '> Delete </a> "; } } ] }); })
</Script> </Head> <Body> <Table id = "tt" data-options = "fit: true, toolbar: '# tb'"> </body> </Html> |
This is done, and the attachment is:
Thank you for visiting the first blog!