夜_依然的gravatar头像
夜_依然2014-06-11 17:41:19

jquery easyUI demo学习中的问题

ComboGrid(数据表格下拉框)

jquery easyUI demo学习中的问题

1.写法和官方一样,没有的话可以去下载一个api中文文档.使用Javascript通过已经定义的数据表格下拉框。

  1. <input id="cc" name="dept" value="01" />  
  2. $('#cc').combogrid({   
  3.     delay: 500,   //就是你在文本写模糊查询或者其他时间,下拉所做的查询时间
  4.     mode: 'remote',   //这个尤为重要,它是一个远程加载数据在下拉(说白了就是你在文本框按条件查询要用到)
  5.     url: 'get_data.php',   //url路径
  6.     idField: 'id',   //id
  7.     textField: 'name',   //显示文本框中
  8.     fitColumns:true, //自动调整样式大小
  9.     columns: [[   //加载数据
  10.         {field:'code',title:'Code',width:120,sortable:true},   
  11.         {field:'name',title:'Name',width:400,sortable:true}   
  12.     ]]   
  13. }); 
  14. 注意:这个重要是在文本进行模糊查询的时候,在参数传到后台,参数命名必须为q,这是easyUI封装了的!例如
  15. jquery easyUI demo学习中的问题
  16. Tree(树结构)
  17. jquery easyUI demo学习中的问题
  18. 树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。

  19. <ul id="tt"></ul>  
  20. $('#tt').tree({   
  21.     url:'tree_data.json'  
  22. });  
  23. Tree的json格式
  24. [{   
  25.     "id": 1,   
  26.     "text": "Node 1",   
  27.     "state": "closed",   
  28.     "children": [{   
  29.         "id": 11,   
  30.         "text": "Node 11"  
  31.     },{   
  32.         "id": 12,   
  33.         "text": "Node 12"  
  34.     }]   
  35. },{   
  36.     "id": 2,   
  37.     "text": "Node 2",   
  38.     "state": "closed"  
  39. }]  
  40. 这个我不得不吐槽一下,百度上大多都是说这种格式,而不说明这种格式如何写。很反感那些人。
  41. package com.kjcity.sys.domain;

    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;

    public class TreeNode {
        
        
        /**
         * 节点id
         */
        private int id;
        /**
         * 树节点名称
         */
        private String text;
        
        
        private int pid;
        /**
         * 子节点
         */
        private List<TreeNode> children;
        public int getId() {
            return id;
        }
        public void setId(int id) {
            this.id = id;
        }
        public String getText() {
            return text;
        }
        public void setText(String text) {
            this.text = text;
        }
        public int getPid() {
            return pid;
        }
        public void setPid(int pid) {
            this.pid = pid;
        }
        public List<TreeNode> getChildren() {
            return children;
        }
        public void setChildren(List<TreeNode> children) {
            this.children = children;
        }
        public TreeNode(int id, String text, int pid, List<TreeNode> children) {
            super();
            this.id = id;
            this.text = text;
            this.pid = pid;
            this.children = children;
        }
        public TreeNode() {
            super();
        }
    }

    package com.kjcity.common;

    import java.util.ArrayList;
    import java.util.List;

    import com.kjcity.sys.domain.TreeNode;

    public class JsonFactory {
         // 以对象形式传回前台
         
        public static List<TreeNode> buildtree(List<TreeNode> nodes,int id){
            List<TreeNode> treeNodes=new ArrayList<TreeNode>();
            for (TreeNode treeNode : nodes) {
                TreeNode node=new TreeNode();
                node.setId(treeNode.getId());
                node.setText(treeNode.getText());
                if(id==treeNode.getPid()){
                    node.setChildren(buildtree(nodes, node.getId()));
                    treeNodes.add(node);
                }
                
            }
            return treeNodes;
        }
        
    }

  42. 这两个文件是关于Tree的json格式问题。当然也可以两个文件写成一个。至于其他官网上有。

  43. ComboTree(树形下拉框)

  44. jquery easyUI demo学习中的问题
  45. 这个是图片,我所做的没有添加checkbox相信添加一个checkbox小case
  46. 使用Javascript创建树形下拉框。

  47. <input id="cc" value="01">  
  48. $('#cc').combotree({   
  49.     url: 'get_data.php',   
  50. }); 
  51. 这个其实就是按照上面Tree的json格式写就可以出来的!
  52. DataGrid(数据表格)

  53. jquery easyUI demo学习中的问题
  54. <table id="dg"></table>  
  55. $('#dg').datagrid({   
  56.     url:'datagrid_data.json',   
  57.     columns:[[   
  58.         {field:'code',title:'Code',width:100},   
  59.         {field:'name',title:'Name',width:100},   
  60.         {field:'price',title:'Price',width:100,align:'right'}   
  61.     ]]   
  62. });  
  63. DataGrid的json格式
  64. {"total":3,"rows":[{"id":"1","time":"时间time","title":"法律title"},{"id":"2","time":"时间1time","title":"法律1title"},{"id":"3","time":"时间2time","title":"法律2title"}]}//注意这个total,rows必须要有。是一种格式你total是数量,rows是数组.
  65. TreeGrid(树形表格)

  66. jquery easyUI demo学习中的问题
  67. 使用Javascript创建树形表格。

  68. <table id="tt" style="width:600px;height:400px"></table>  
  69. $('#tt').treegrid({   
  70.     url:'get_data.php',   
  71.     idField:'id',   
  72.     treeField:'name',   
  73.     columns:[[   
  74.         {title:'Task Name',field:'name',width:180},   
  75.         {field:'persons',title:'Persons',width:60,align:'right'},   
  76.         {field:'begin',title:'Begin Date',width:80},   
  77.         {field:'end',title:'End Date',width:80}   
  78.     ]]   
  79. }); 
  80. 这个也得注意它的格式,我是这样的将id的命名为_parentIdjquery easyUI demo学习中的问题

或者用children也行!但我没用过children具体本部怎么熟悉,且TreeGrid结构没有分页。

好了,大概是这些,因为第一次写分享,可能不够详细,不够透彻!但这些都是我所经历过被卡主的问题,所以在这里写出来。如果大家有类似的错误,希望对大家有所帮助。


最代码官方编辑于2014-6-11 18:19:01


打赏

顶部客服微信二维码底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友