Easy UI常用插件使用

一、easy UI是类似于jQuery UI的插件库，它提供了丰富的各种常用插件：tree、datagrid...

tree插件：

语法：$(selector).tree([settings]);

常用属性：

常用方法、事件：

使用tree插件实现树形菜单：

客户端页面关键代码：

① 引入easy UI插件及样式文件

② 定义用来配置树形菜单的区域

③ 使用tree方法加载远程树形菜单数据

<script type="text/javascript">
    $(function() {
        $("#easyui-tree").tree({
            checkbox : true,
            url : 'basic_tree_date.json',
            onBeforeLoad : function(node, param) {
                //alert('开始请求数据')
            },
            onLoadSuccess : function(node, data) {
                //alert('数据请求成功')
            },
            onLoadError : function() {
                //alert('加载失败')
            },
            onClick : function(node) {
                //获取指定的节点对象
                 $('#easyui-tree').tree('getNode',node.target)
                //alert($('#easyui-tree').tree('getNode',node.target).id)
                //获取指定的节点数据，包括子节点
                 console.log($('#easyui-tree').tree('getData',node.target))
 
                //获取根节点，返回节点对象
                console.log($('#easyui-tree').tree('getRoot',node.target))
 
                console.log($('#easyui-tree').tree('getParent',node.target))
 
                //获取子节点
                 console.log($('#easyui-tree').tree('getChildren',node.target))
 
                //指定节点进行添加操作
                /*   if( $('#easyui-tree').tree('getChildren',node.target).length==0){
                    $('#easyui-tree').tree('append',{
                     parent:node.target,
                     data:[{text:'呵呵'}]
                  })
                 }  */
 
            },
 
            onlyLeafCheck : false,
            //随意拖动
            dnd : true,
        });
 
    });
 
    function bs() {
        //加载tree数据
         $('#easyui-tree').tree('loadData',[{text:'number11'}])
 
        //重新加载树的数据
        $("#easyui-tree").tree('reload')
 
        //获取所有勾选选中的节点
        console.log($('#easyui-tree').tree('getChecked'))
 
        //获取所有选中的节点
        console.log($('#easyui-tree').tree('getSelected'))
 
        //根据id属性值找到该节点
        console.log($('#easyui-tree').tree('find',12))
 
        //选中一个节点
         var node= $('#easyui-tree').tree('find',12);
        $('#easyui-tree').tree('select',node.target);  
 
        //选中
        var node= $('#easyui-tree').tree('find',12);
        $('#easyui-tree').tree('check',node.target); 
 
        //指定节点不选中
         var node= $('#easyui-tree').tree('find',12);
        $('#easyui-tree').tree('uncheck',node.target); 
 
        //指定节点折叠
         var node= $('#easyui-tree').tree('find',1);
         $('#easyui-tree').tree('collapse',node.target);  
 
        //展开所有节点
        $('#easyui-tree').tree('expandAll')
    }
</script>

④ 创建服务器端basic_tree_date.json--待加载的远程树形菜单数据

Node对象参数：

tree数据节点：

basic_tree_date.json：

实现效果：

---

datagrid插件：

语法：$(selector).datagrid([settings]);

参数settings:用于配置datagrid的键值对集合

常用属性：

常用方法：

常用事件：

Column对象常用属性：是一个数组对象，它的每个元素也是一个数组。它定义了每个列的字段。

① 客户端页面代码：datagrid2.jsp

引入easy UI插件及样式文件

② 定义用来放置数据列表的区域

③ 使用datagrid方法创建列表组件展示远程数据

 <script type="text/javascript">
      $(function(){
        $('#dg').datagrid({
        //远程请求数据的url路径
        url:'<%=path%>/datagrid/datagrid_server.jsp',
        width:800,
        height:300,
        //表头的小头标
        iconCls:'icon-search',
        //显示行号
        rowNumbers:true,
        //显示底部分页栏
         pagination:true,
        //默认显示每页记录数
        pageSize:5,
        pageList:[5,10,15],
        //指定列
        columns:[[
                {field:'ck',checkbox:true},
                {field:'title',title:'投票标题',width:408},
                {field:'options',title:'备选项数',width:60,align:'center'},
                {field:'participants',title:'参与人数',width:60,align:'center'}
            ]],
        loadMsg:"正努力为您加载中......",
        //只允许选中一行
        singleSelect:true,
        //隔行变色
        striped:true,
        rownumbers:true,  
 
      });
 
     });
  </script>

④ 创建列表数据工具类CridNode：封装属性，并定义无参和带参构造

public class CridNode {
 
    private Long id;// 投票id
    private String title;// 投票标题
    private String options;// 备选项数
    private String participants;// 参选人数
 
    public CridNode() {
 
    }
 
    public CridNode(Long id, String title, String options, String participants) {
        super();
        this.id = id;
        this.title = title;
        this.options = options;
        this.participants = participants;
    }
 
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getOptions() {
        return options;
    }
    public void setOptions(String options) {
        this.options = options;
    }
    public String getParticipants() {
        return participants;
    }
    public void setParticipants(String participants) {
        this.participants = participants;
    }

⑤服务器端代码：datagrid_server.jsp 根据分页参数获取待加载的列表数据

<%
    //构造测试数据
    List<CridNode> list = new ArrayList<CridNode>();
    list.add(new CridNode(1L, "选出你心目中最好的下载工具", "2", "6"));
    list.add(new CridNode(2L, "选出你心目中最好的输入法", "5", "4"));
    list.add(new CridNode(3L, "选出你心目中最好的浏览器", "5", "11"));
    list.add(new CridNode(4L, "选出你心目中最好的杀毒软件", "6", "4"));
    list.add(new CridNode(5L, "选出你心目中最好的社交软件", "3", "14"));
    list.add(new CridNode(6L, "选出你心目中最好的聊天工具", "3", "2"));
    list.add(new CridNode(7L, "选出你心目中最好的翻译软件", "5", "0"));
    list.add(new CridNode(8L, "选出你心目中最好的播放器", "2", "23"));
    list.add(new CridNode(9L, "选出你心目中最好的免费软件", "4", "7"));
    list.add(new CridNode(10L, "选出你心目中最好的录音软件", "4", "18"));
    list.add(new CridNode(11L, "选出你心目中最好的刷机软件", "5", "6"));
 
    //获取客户端传递的分页参数
    // 默认参数rows表示每页显示记录条数，  默认参数page表示当前页数
 
    Integer pageSize=Integer.parseInt(request.getParameter("rows"));
 
    Integer pageNumber=Integer.parseInt(request.getParameter("page"));
 
    //默认参数page表示当前页数
    StringBuilder builder = new StringBuilder("{\"total\":"+ list.size() + ",\"rows\":[");
    //计算开始记录数
    int start = (pageNumber - 1) * pageSize;
    //计算结束记录数
    int end = start + pageSize;
    //根据分页起始参数构建当前页的列表数据
    for (int i = start; i < end && i < list.size(); i++) {
        CridNode gn = list.get(i);
        builder.append("{\"id\":\"" + gn.getId() + "\",\"title\":\""+ gn.getTitle()
                + "\",\"options\":" + gn.getOptions()
                + ",\"participants\":" + gn.getParticipants() + "},");
    }
    String gridJSON = builder.toString();
    if (gridJSON.endsWith(",")) {
        gridJSON = gridJSON.substring(0, gridJSON.lastIndexOf(","));
    }
 
    out.print(gridJSON + "]}");
%>

实现效果：