项目中运用easyui的总结，随着项目进行不定期更新

本文链接：https://blog.csdn.net/shenbushen/article/details/52425911

最近，一直忙着做公司项目，写博客写的不勤快，挤出一点时间，总结总结近来的各种收获。

最近也是忙得够呛：既要建库建表，写后端代码，又要兼顾前端布局，数据加载。遇到过难点，但是也都很好的克服了。

easyui：

1.下拉选择框的使用：这种功能很常见：传统做法是：从数据库拿数据，包装好后，随页面返回。新做法是：页面加载完后，异步请求获取数据（JSON格式），到指定位置加载。而使用easyui的做法是，用到时再去加载（点击时才加载）。更复杂的是下拉框与框之间存在上下级关系，即先加载A框，选择一个项后，根据这个项的id，去加载B框。，

前端easyui代码：

<td><select class="easyui-combotree" url="/ylitsm/cmdb/c.do" name="city" style="width:156px;"/></td>
<input id="cc1" class="easyui-combobox" data-options="    
        valueField: 'id',    
        textField: 'text',  
      
        onShowPanel: function(){
          if($(this).combobox('getValues')=='')
          {
            var url = 'e.do';    
            $('#cc1').combobox('reload', url);    
            }
                    },
        onSelect:function(rec)
        {
        	var url='d.do?id='rec.id;
        	$('#cc2').combobox('reload',url);
        }" />   
<input id="cc2" class="easyui-combobox" data-options="valueField:'id',textField:'text'" />

后台发json数据

@RequestMapping("/d.do")  
	@ResponseBody
	public void d(Model model,HttpServletRequest request,HttpServletResponse response) throws IOException
	{
		Vector<Map<String,Object>> vs=new Vector<Map<String,Object>>();
		
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("id","1");
		map.put("text","two");
		
		
		Map<String, Object> map2=new HashMap<String, Object>();
		map2.put("id","2");
		map2.put("text","theee");
		
		vs.add(map);
		vs.add(map2);
		String ztreeOrgUserJson = JSON.toJSONString(vs); 
		printWriterStringToJson(response, ztreeOrgUserJson);
	
	}
	
	
	
	@RequestMapping("/e.do")  
	@ResponseBody
	public void e(Model model,HttpServletRequest request,HttpServletResponse response) throws IOException
	{
		Vector<Map<String,Object>> vs=new Vector<Map<String,Object>>();
		
		Map<String, Object> map=new HashMap<String, Object>();
		map.put("id","1");
		map.put("text","four");
		
		
		Map<String, Object> map2=new HashMap<String, Object>();
		map2.put("id","2");
		map2.put("text","five");
		
		vs.add(map);
		vs.add(map2);
		String ztreeOrgUserJson = JSON.toJSONString(vs); 
		printWriterStringToJson(response, ztreeOrgUserJson);
	
	}

</pre><pre code_snippet_id="1864982" snippet_file_name="blog_20160903_4_3920750" class="html" name="code">JSON数据格式：   [{"id":"1","text":"four"},{"id":"2","text":"five"}]            务必与 前台设置对应 valueField: 'id',    textField: 'text'

2.树形下拉选择框：json数据格式

后台需要拼接的数据格式：

{"children":[{"children":[],"id":"8a8a18d11e820b84011e821579bc0007","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"路由器"},{"children":[],"id":"8a8a18d11e820b84011e82161976000d","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"交换机"},{"children":[],"id":"8a8a18d11e820b84011e82172a1b0019","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"网关"},{"children":[],"id":"8a8a18d11e820b84011e821835fd0025","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"Modem"},{"children":[],"id":"8a8a18d12d5a29e0012d5a9f01e40002","pid":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"负载均衡"}],"id":"8a8a18d12d5a29e0012d5a9d0d120001","state":"open","text":"网络设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821b11120031","pid":"8a8a18d12d5a29e0012d5aa022730003","state":"open","text":"磁带库"},{"children":[],"id":"8a8a18d11e820b84011e821bb08e0037","pid":"8a8a18d12d5a29e0012d5aa022730003","state":"open","text":"磁盘阵列"}],"id":"8a8a18d12d5a29e0012d5aa022730003","state":"open","text":"存储设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e8216b6140013","pid":"8a8a18d12d5a29e0012d5aa14d3f0004","state":"open","text":"防火墙"},{"children":[],"id":"8a8a18d12d5a29e0012d5aa237f70005","pid":"8a8a18d12d5a29e0012d5aa14d3f0004","state":"open","text":"加密机"}],"id":"8a8a18d12d5a29e0012d5aa14d3f0004","state":"open","text":"安全设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821d0d5f003d","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"空调"},{"children":[],"id":"8a8a18d11e820b84011e821db3c00043","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"电源"},{"children":[],"id":"8a8a18d11e820b84011e821e64920049","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"机柜"},{"children":[],"id":"8a8a18d11e820b84011e82207cf30067","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"KVM"},{"children":[],"id":"8a8a18d12d5a29e0012d5aa7b4370008","pid":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"配线架"}],"id":"8a8a18d12d5a29e0012d5aa2e0240006","state":"open","text":"机房设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821f9e99005b","pid":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"打印机"},{"children":[],"id":"8a8a18d11e820b84011e822029160061","pid":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"扫描仪"},{"children":[],"id":"ff8081812d633cf4012d6438b5230024","pid":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"复印机"}],"id":"8a8a18d12d5a29e0012d5aa439bc0007","state":"open","text":"办公设备"},{"children":[{"children":[],"id":"8a8a18d11e820b84011e821ebd22004f","pid":"8a8a18d12d5a29e0012d5aa862a50009","state":"open","text":"台式机"},{"children":[],"id":"8a8a18d11e820b84011e821f1eda0055","pid":"8a8a18d12d5a29e0012d5aa862a50009","state":"open","text":"笔记本"}],"id":"8a8a18d12d5a29e0012d5aa862a50009","state":"open","text":"桌面"}]

如何拼接成这样的数据呢？

第一步：得有个容器去装数据：分析一下数据格式：可得到如下的数据结构：

public class EasyUitreeObject {

	private String id;
	private String text;
	private String state;
	private String pid;
	private List <EasyUitreeObject>children;
	public String getId() {
		return id;
	}
	public void setId(String id) {
		this.id = id;
	}
	public String getText() {
		return text;
	}
	public void setText(String text) {
		this.text = text;
	}
	public String getState() {
		return state;
	}
	public void setState(String state) {
		this.state = state;
	}
	public String getPid() {
		return pid;
	}
	public void setPid(String pid) {
		this.pid = pid;
	}
	public List<EasyUitreeObject> getChildren() {
		return children;
	}
	public void setChildren(List<EasyUitreeObject> children) {
		this.children = children;
	}
	
}

//有了容器，就要有数据：数据从数据库中来，以下方法是取数据和装数据：

	/**
	 * 
	 *author:cwy
	 *说明:cmdb之类别树
	 *参数：
	 * @param response
	 * @throws IOException
	 */
	@RequestMapping("/categorytree.do")  
	public void getcategorytree(HttpServletResponse response) throws IOException
	{
		String companyId=SpringContextUtil.getUser().getCompanyId();
		//获取配置项数据,包括父子节点
		List<Itsm_ci_category> ls=this.itsm_ci_categoryService.findListByHql("from Itsm_ci_category where mwr_code=? and companyid=?","CICATEGORY",companyId);
		List<EasyUitreeObject> ztreeList=new ArrayList<EasyUitreeObject>();
	
		for(int i=0;i<ls.size();i++)   //数据装进easytree中
		{
			Itsm_ci_category icc=ls.get(i);
			EasyUitreeObject  jsontree=new EasyUitreeObject ();
			jsontree.setId(icc.getResourceid());
			jsontree.setText(icc.getName());
			jsontree.setPid(icc.getParent());
			jsontree.setState("open");
			
			ztreeList.add(jsontree);
		}
		
		 List<EasyUitreeObject> newTreeDataList =EasyUiTreeUtill.getfatherNode(ztreeList);  //装配easytree为树形状
		String ztreeOrgUserJson = JSON.toJSONString(newTreeDataList); // 转化为ztree对象
		printWriterStringToJson(response, ztreeOrgUserJson);

	}

从数据库获取一堆数据，每条数据都有id和他的父id，假设只有一个根节点，那么我们就得先从这堆数据中找到最顶层的节点：遍历每一个节点的父Id,跟id对比，父id在id中找不到则说明这是根节点（此结论只成立于一堆数据只有一个根节点）。获取根节点后，使用递归的方式找到他的树枝。

具体上代码：

public class EasyUiTreeUtill {

	/**
	 * 
	 *author:cwy
	 *说明:根点为null,通过此方法可以将list转为easyuitree格式的list，最后将这个list转为json，供前台easyui 下拉选择树控件使用
	 *参数：
	 * @param treeDataList
	 * @return
	 */
	public final static List<EasyUitreeObject> getfatherNode(List<EasyUitreeObject> treeDataList) {
        List<EasyUitreeObject> newTreeDataList = new ArrayList<EasyUitreeObject>();
        for (EasyUitreeObject jsonTreeData : treeDataList) {
            if(jsonTreeData.getPid()==null) {
                //获取父节点下的子节点
                jsonTreeData.setChildren(getChildrenNode(jsonTreeData.getId(),treeDataList));
                jsonTreeData.setState("open");
                newTreeDataList.add(jsonTreeData);
            }
        }
        return newTreeDataList;
    }
     
    /**
     * 
     *author:cwy
     *说明:通过父节点，和整个List获取字节点List
     *参数：
     * @param pid
     * @param treeDataList
     * @return
     */
    private final static List<EasyUitreeObject> getChildrenNode(String pid , List<EasyUitreeObject> treeDataList) {
        List<EasyUitreeObject> newTreeDataList = new ArrayList<EasyUitreeObject>();
        for (EasyUitreeObject jsonTreeData : treeDataList) {
            if(jsonTreeData.getPid() == null)  continue;
            //这是一个子节点
            if(jsonTreeData.getPid().equals(pid)){
                //递归获取子节点下的子节点
                jsonTreeData.setChildren(getChildrenNode(jsonTreeData.getId() , treeDataList));
                newTreeDataList.add(jsonTreeData);
            }
        }
        return newTreeDataList;
    }
    
    /**
     * 
     *author:cwy
     *说明:找出唯一的根节点，若有多个根节点，则取第一个为根节点
     *参数：
     * @param ls
     * @return
     */
    public final static String getRoot(List<JsonTreeData> ls)
	{
		String rootid=null;
		int sum=0;
		
		
			for(int i=0;i<ls.size();i++)
			{
				for(int j=0;j<ls.size();j++)
				{
					if(ls.get(i).getPid().equals(ls.get(j).getId()))        //父id与所有的id对比，在id中找到,则将标记至0，找不到则加1
					{
						sum=0;
						break;
					}
					else
					{
					 sum++;	
					}
				}
				if(sum==ls.size())                                           //若找不到，则此节点的父节点是根节点
				{
					rootid=ls.get(i).getPid();
					break;
				}
			}
			return rootid;
		
	}
	
}

前台：easyui

<td style="width: 210px;">类别：<input id="category"  class="easyui-combotree" url="/ylitsm/cmdb/categorytree.do" name="category" style="width:156px;"/></td>

3.下拉框中，不仅仅有数据，还可以编辑，删除，这条数据。做法是使用combogrid：

先设置一个

<span>测试</span><input id="test" style="width:150px"/>

然后是js：formatter属性是设置列属性

<pre name="code" class="html">function formatAction(value,row,index){
			return "<input type='button' value='编辑'/><input type='button' value='删除'/>";
			}

$('#test').combogrid({
	panelWidth:500,
	url: 'get_ci_infor.do',
	idField:'resourceid',
	textField:'name',
	mode:'remote',
	fitColumns:true,
	columns:[[
		{field:'name',title:'Item ID',width:60},
		{field:'resourceid',title:'Stauts',align:'center',formatter:formatAction,width:30}
		
	]]
	
});

datagrid的使用：

1.常用的使用场景：新增不加载，编辑加载：所以要控制一下：在html有了url，会默认请求一次无参数的，在html中不加入url，需要调用的时候加入：

	if ( pageType!="add") {
				
					$("#mainTabslist").datagrid({
						url :"${pageContext.request.contextPath}/purcharing/purchase_list_ategrid.do",
						queryParams: {
							"resourceid" : $("#resourceid").val()
						},
						pagination : true
					});
				}

2.html有url，为url添加参数：

$("#mainTabsInstallation").datagrid("load",{resourceid:data.itsm_soft.resourceid});