In recent days, I have learned easyUI and used the tree component. After n days of pain, I finally came out. Now I will summarize some problems.
1. In the official demo, all the data is taken from the. JSON file. In practical application, it is obviously impossible to do so. If you want to take it from the database, then the problem is, how to get it?There’s no explanation in the official demo, and I haven’t found any results after searching online for a long time
Methods 1:Ajax is fetched, after the web interface is loaded, the Ajax is called, and the value is spliced from the background in the database, and spliced into JSON. There are many methods of splicing. Here is not enumerated. After the completion of the mosaic, JSON is written back by response writer. In JS, the data parameter of tree is the returned JSON (time reason, this method is not tested, and the theory is feasible).
Method 2: root method 1 is similar: the following is the code
HTML code of tree:
<ul id="department_tree" class="easyui-tree"></ul>
JS code of tree:
/**
* @argument Fetching data from a tree by URL
* @author ZHENGWEI
* @date 2015-5-8
* @version 1.0
*/
$(document).ready(function(){
/* Called when loading is complete*/
$("#department_tree").tree({
/*JSON spliced address*/
url:'CompanyStaffAction!listCompanyDepartment.action',
/*Linked lines*/
lines:true,
/*animation effect*/
animate:true
});
})
The URL is the action returned to JSON in the background, and the code is as follows
/**
* Search company's department information
* @author ZHENGWEI
* @throws JSONException
* @throws IOException
* @date 2015-5-7
*/
public String listCompanyDepartment() throws JSONException, IOException{
//Set the encoding format to prevent Chinese characters from being garbled
response.setCharacterEncoding("UTF-8");
//return company department information
List<CompanyDepartmentInfo> companyDepartmentInfoList = this.companyStaffService.listCompanyDepartment();
// Declare the JSONArray object and build the tree
JSONArray jsonChildTreeArray = new JSONArray();
//condemn empty
if(companyDepartmentInfoList.size() != 0){
for(CompanyDepartmentInfo companyDepartmentInfo:companyDepartmentInfoList){
JSONObject jsonChildInfoObject = new JSONObject();
jsonChildInfoObject.put("id", '"'+companyDepartmentInfo.getDepartmentId()+'"');
jsonChildInfoObject.put("text", companyDepartmentInfo.getDepartmentName());
jsonChildTreeArray.put(jsonChildInfoObject);
}
}
JSONObject jsonDepartmentTree = new JSONObject();
jsonDepartmentTree.put("id", "0");
jsonDepartmentTree.put("text", "CompanyDepartmentTree");
jsonDepartmentTree.put("state", "open");
// turn the jsonChildTreeArray into a child node
jsonDepartmentTree.put("children", jsonChildTreeArray);
//string type, add '[]' to JSON
String treeData = jsonDepartmentTree.toString();
treeData = "["+treeData+"]";
// Declare PrintWriter variable to pass back JSON
PrintWriter out = response.getWriter();
out.write(treeData);
return null;
}
It must be noted that,
After the encapsulation of JSON, make sure to print it to see if there is a [] symbol package outside of JSON, otherwise tree can’t read the data!!!!
The final results are as follows:
It’s a very hard process… It’s tears when I talk too much, and many problems on the Internet can’t reach the point. I’ve thought about it for many days, and I hope that students who study in the future will avoid detours
