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

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

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

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});
	  						









评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值