easyui控件使用例子

Posted 2020-09-24 小平1993

1.easyui之dataGrid分页加载数据例子

注意：1）分页表格通过url获得数据会提交page,rows两个参数；后台需要获取这两个参数并且由此得到

　　　int pageSize=rows/page;//每页记录数

　　　int pageNum=page;//当前页面

　　之后获得分页数据可用sql：............LIMIT "+(pageNum-1)*pageSize+","+pageSize;放回需要的指定页面数据

　　　2）后台代码需要放回固定格式的json数据{"total":28,"rows":[{},{},{}]}类似这个格式

　　　　可以用com.alibaba.fastjson.JSONObject  fastjson工具处理json数据；

　　　　一般我们常用这个工具俩个对象：JSONObject;JSONArray具体用法下面代码有

1.前端代码
<div id="tt"></div>
<script>
　　$(‘#tt‘).datagrid({
　　　singleSelect : true, 

　　　　loadMsg:‘数据加载中请稍后……‘,
　　　　pagination: true,
　　　　rownumbers: true,
　　　　fitColumns : true,
　　　　width:‘auto‘ ,
　　　　columns:[[
　　　　　　{field:‘id‘,title: ‘id‘,align: ‘left‘},
　　　　　　{field:‘pid‘,title: ‘pid‘,align: ‘left‘},
　　　　　　{field:‘level‘,title: ‘level‘,align: ‘left‘},
　　　　　　{field:‘code‘,title: ‘code‘,align: ‘left‘},
　　　　　　{field:‘name‘,title: ‘name‘,align: ‘left‘},
　　　　]],
　　　url:‘sysMgrController.do?showSSQTableBypid&pid=‘+pid//通过url放回json数

　　})
</script>
2.java后台代码

　　@RequestMapping(params = "showSSQTableBypid", method = RequestMethod.POST)
　　@ResponseBody
　　public JSONObject showSSQTableBypid(int page,int rows,Integer pid,HttpServletRequest request, HttpServletResponse response) throws NoSuchFieldException, Exception {
　　　　JSONObject result=new JSONObject();
　　　　int pageSize=rows/page;//每页记录数
　　　　int pageNum=page;//当前页面
　　　　String sql="SELECT id AS id,pid AS pid,level AS level,code AS code,name AS name FROM ty_conf_division WHERE pid="+pid+" LIMIT"+(pageNum-1)*pageSize+","+pageSize ;
　　　　List<Map<String, Object>> rows1=sysMgrServiceI.findForJdbc(sql);
　　　　//获得总的记录数
　　　　String totalPage = "select count(1) as count from ty_conf_division where pid="+pid;
　　　　Map<String, Object> count = sysMgrServiceI.findOneForJdbc(totalPage);
　　　　int total=Integer.parseInt(String.valueOf(count.get("count")));
　　　　result.put("total", total);
　　　　result.put("rows", rows1);
　　　　return result;
}

 

2.easyui tree异步加载json数据例子：其中很多事件方法可以利用

　　1）注意：tree异步加载数据

　　　　　　 tree控件对异步加载数据有个机制：在展开节点时会自动发送节点id参数到后台，后台可以获取这个参数加载节点下的数据

　　　　　　符合tree的json格式类似于：

[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

　　2）例子：

　　　　主要思想：根据节点参数id，查询子节点所有对象，再通过JSONObject封装子节点对象，再将所有的子节点对象加入JSONArray对象中放回就是符合tree格式的json数据了

前台部分代码
<ul id="provinceCityArea"></ul>
<script>
    $("#provinceCityArea").tree({
           checbox:true,
           url:"sysMgrController.do?showSSQTree",
           animate:true,
           checkbox:true,
           onClick: function(node){
               //dosomething
            },
       });
</script>
后台部分代码
    @RequestMapping(params = "showSSQTree", method = RequestMethod.POST)
    @ResponseBody
    public JSONArray showSSQTree(Integer id,HttpServletRequest request, HttpServletResponse response) throws NoSuchFieldException, Exception {
        //返回满足Tree需要的Json类型数据
        JSONArray result=new JSONArray();
        //处理id
        if((id==null)||"".equals(id)) {
            JSONObject rootObject = new JSONObject();
            rootObject.put("id", 0);
            rootObject.put("text", "全部");
            rootObject.put("state", "closed");
            rootObject.put("attributes", "{‘pid‘:"+0+"}");
            result.add(rootObject);
        }
        String sql="SELECT id AS id,pid AS pid,level AS level,code AS code,name AS name FROM ty_conf_division WHERE pid="+id;
        List<Map<String, Object>> list2=sysMgrServiceI.findForJdbc(sql);
        for (Map<String, Object> map : list2) {
            JSONObject tree=new JSONObject();
            int id1=Integer.parseInt(String.valueOf(map.get("id")));
            String text=String.valueOf(map.get("name"));
            int pid=Integer.parseInt(String.valueOf(map.get("pid")));//父节点
            tree.put("id", id1);
            tree.put("text",text);
            tree.put("attributes", "{‘pid‘:"+pid+"}");
            //判断是否有子节点，如果有则closed否则open 
            String hasChilds="SELECT count(1) FROM ty_conf_division WHERE pid="+id1;
            Long count=sysMgrServiceI.getCountForJdbc(hasChilds);
            if(count==0){
                tree.put("state","open");
            }else{
                tree.put("state","closed");
            }
            
            result.add(tree);
        }
        
        return result;
    }