Tag Archives: easyui

The tree component in easyUI does not display data or displays undefined solutions

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

Method of adding operation button for each line of data in DataGrid of easyUI

When I was working on the project today, I wanted to add an operation button after each column of data in the DataGrid of easyUI. At the beginning, I wanted to splice strings in the background and return them with JSON. But after testing, I found that this method didn’t work. I searched the Internet and sorted them out as follows:

In fact, it’s very easy to add a row of custom columns. When JS declares DataGrid, add the following code

<span style="font-size:18px;">{field:'operate',title:'act',align:'center',width:$(this).width()*0.1,
	formatter:function(value, row, index){
		var str = '<a href="#" name="opera" class="easyui-linkbutton" ></a>';
		return str;
}}</span>

This line of code is defined under the columns property, and it must be added

<span style="font-size:18px;">onLoadSuccess:function(data){  
        $("a[name='opera']").linkbutton({text:'buy',plain:true,iconCls:'icon-add'});  
},</span>

If you don’t add this, there will be no button style in that operation column. It’s just a hyperlink. You can use LinkButton or other buttons according to your needs