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
Read More:
- [Solved] Vue Error: Failed to mount component: template or render function not defined
- [Solved] Rtthread DCM component dcm_cache_save interface Error: mkdir:/data failed
- C Language error: two or more data types in declaration specifiers
- React Hook “useState“ is called in function “xxx“ which is neither a React function component or
- [Solved] Mac Install mongodb error: NonExistentPath: Data directory /data/db not found.
- Mac installation tree command error solution
- Tensorflow error: InvalidArgumentError: indices[data_index] = data_value is not in [0, max_embedding_size)
- [Solved] Use the truss console to connect to the public blockchain network error: mnemonic invalid or undefined
- [Solved] error Component name “index“ should always be multi-word vue/multi-word-component-names
- [Solved] Failed to load response data: no data found for resource with given identifier
- git error: The following untracked working tree files would be overwritten by checkout
- How to Solve canal & MYSQL or “Kafka cannot consume data” Error
- [Solved] kubeflow pipeline visualization component Error: WARNING: Running pip as the ‘root’ user can result in broken permissions and conflicting behaviour with the system package manager…
- [Solved] Laravel Create Data Table Error: Syntax error or access violation: 1071 Specified key was too long
- flask init-db Error: Error: Could not locate a Flask application. Use the ‘flask –app’ option, ‘FLASK_APP’ environment variable, or a ‘wsgi.py’ or ‘app.py’ file in the current directory.
- [Solved] MindSpore Error: ReduceMean in the Ascend environment does not support inputs of 8 or more dimensions
- [Solved] Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are “development”, “test”, and “production”. Instead, received: undefined.
- How to Solve Element Error: target is not existed: .page-component__scroll .el-scrollbar__wrap
- errorThrown:ReferenceError: data is not defined [How to Solve]
- [Vue warn]: Error in render: TypeError: Cannot read property ‘xxxx’of undefined