zoukankan      html  css  js  c++  java
  • easyui控件使用例子

    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,
        '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;
        }
  • 相关阅读:
    立体匹配算法(转载)
    校招总结
    tcpip概述
    Matlab2014a 提示未找到支持的编译器或 SDK的解决方法
    CSS3 实现简单轮播图
    css3实现switch开关效果
    Sass的使用和基础语法
    Git的安装和使用记录
    jQuery淡入淡出效果轮播图
    JavaScript焦点轮播图
  • 原文地址:https://www.cnblogs.com/xiaoping1993/p/7077284.html
Copyright © 2011-2022 走看看