码迷,mamicode.com
首页 > 其他好文 > 详细

easyui控件使用例子

时间:2017-06-25 18:33:51      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:tps   select   root   ring   pos   post   pen   table   strong   

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

 

easyui控件使用例子

标签:tps   select   root   ring   pos   post   pen   table   strong   

原文地址:http://www.cnblogs.com/xiaoping1993/p/7077284.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!