Table easyui-datagrid

来自ling
跳转至: 导航搜索

asyui-layout div easyui-window div easyui-panel a easyui-linkbutton input/textarea easyui-validatebox ul easyui-tree table easyui-datagrid div easyui-tab div menu-sep a easyui-splitbutton div easyui-accordion select easyui-combobox select easyui-combotree body/div easyui-layout div easyui-menu a easyui-menubutton input easyui-numberbox timerSpan

                1)title:该DataGrid面板的标题文本。
                2)iconCls:一个CSS类,将提供一个背景图片作为标题图标。
                3)border:当true时,显示该datagrid面板的边框。
                4)width:面板宽度,自动列宽。
                5)height:面板高度,自动列高。
                6)columns:该DataGrid列配置对象,查看column属性可获取更多信息。
                7)frozenColumns:跟Columns属性相同,但是这些列将会被固定在左边。
                8)striped:当true时,单元格显示条纹。默认false。
                9)method:通过该方法类型请求远程数据。默认post。
               10)nowrap:当true时,显示数据在同一行上。默认true。
               11)idField:说明哪个字段是一个标识字段。
               12)url:一个URL,从远程站点获取数据。
               13)loadMsg:当从远程站点加载数据时,显示一个提示信息。默认"Processing,please wait …"。自定义覆盖。
               14)pagination:当true时在DataGrid底部显示一个分页工具栏。默认false。
               15)rownumbers:当true时显示行号。默认false。
               16)singleSelect:当true时只允许当前选择一行。默认false。
               17)fit:当true时,设置大小以适应它的父容器。默认false。
               18)pageNumber:当设置分页属性时,初始化的页码编号。默认从1开始
               19)pageSize:当设置分页属性是,初始化的页面大小。默认10行
               20)pageList:当设置分页属性时,初始化页面的大小选择清单。默认[10,20,30,40,50]
               21)queryParams:当请求远程数据时,也可以发送额外的参数。
               22)sortName:定义哪列可以排序。
               23)sortOrder:定义列的排列顺序,只能是'asc'或'desc'。默认asc。
  • Column属性如下:
                1)title:该列标题文本。
                2)field:该列对应的字段名称。
                3)width:列宽。
                4)rowspan:说明该单元格需要多少行数。
                5)colspan:说明该单元格需要多少列数。
                6)align:说明Column数据的对齐方式。'left','right','center' 都可以使用。
                7)sortable:当true时,允许该列进行排序。
                8)checkbox:当true时,允许该列出现checkbox。
  • 事件如下:
                1)onLoadSuccess:当远程数据加载成功是激活。
                2)onLoadError:当远程数据加载发现一些错误时激活。
                3)onClickRow:当用户点击某行时激活,参数包含:
                   rowIndex: 点击的行索引,从0开始。
                   rowData: 点击行时对应的记录。
               4)onDblClickRow:当用户双击某行时激活,参数包含:
                   rowIndex: 点击的行索引,从0开始。
                   rowData: 点击行时对应的记录。
               5)onSortColumn:当用户对某列排序时激活,参数包含:
                  sort:排序字段名称。
                  order:排序字段类型。
               6)onSelect:当用户选择某行时激活,参数包含:
                  rowIndex: 点击的行索引,从0开始。
                  rowData: 点击行时对应的记录。
               7)onUnselect:当用户取消选择某行时激活,参数包含:
                   rowIndex: 点击的行索引,从0开始。
                   rowData: 点击行时对应的记录。
  • 方法如下:
                1)options:返回选择对象。
                2)resize:重调大小,生成布局。
                3)reload:重新加载数据。
                4)fixColumnSize:固定列大小。
                5)loadData:加载本地数据,过去的行会被删除。
                6)getSelected:返回第一个选中行的记录,若未选返回null。
                7)getSelections:返回选中的所有行,当没有选择记录时将返回空数组。
                8)clearSelections:清除所有选项的选择状态。
                9)selectRow:选择一行,行索引从0开始。
               10)selectRecord:通过传递一个ID值参数,选择一行。
               11)unselectRow:取消选择一行。
<thead>
    <tr>
        <th field="name1" width="50" rowspan="2">Col 1</th>
        <th field="name2" width="50" rowspan="2">Col 2</th>
        <th field="name3" width="50" rowspan="2">Col 3</th>
        <th colspan="3">Details</th>
    </tr>
    <tr>
        <th field="name4" width="50">Col 4</th>
        <th field="name5" width="50">Col 5</th>
        <th field="name6" width="50">Col 6</th>
    </tr>                          
</thead>

 <div  region="center" border="false"  style="padding:0px 3px 0px 3px;margin:0px;"> 

              <table id="test"></table> 

    </div>



初置化gird

$(function(){ 

                   

                  loadgrid();    

                  //loadcombobox(null); 

       });

function loadgrid(){

       $('#test').datagrid({

              title:'任免信息列表',

              fit:true,

              nowrap: false,

              striped:false,

              //url:'rm.json',

              url:'http://127.0.0.1:8080/web/AppAndRemoveServer.server',

              queryParams:{},

              sortName: 'appandremove_id',

              sortOrder: 'asc',

              remoteSort: false,

              idField:'appandremove_id',

              frozenColumns:[[

                    {field:'ck',checkbox:true}

              ]],

              columns:[[{field:'appandremove_id',title:'任免批次编号',width:200,sortable:true},

              {field:'batch_name',title:'任免批次名称',width:240,sortable:true},

              {field:'batch_no',title:'任免批次编号',width:100,sortable:true},

              {field:'recorder_date',title:'登记时间',width:120,sortable:true},

              {field:'recorder_id',title:'登记人',width:100,sortable:true},

              {field:'state',title:'状态',width:100,sortable:true},

              {field:'memo',title:'备注',width:300}

          

              ]],

              pagination:true,

              pageNumber:1,

              pageSize:5,

              pageList:[5,10],           

              //singleSelect:true,

              rownumbers:true  

           });

    }


服务端接收rows、page、order、sort参数
    参数名称是easyui起的,值也是自动绑定

    可以在服务端通过request.getParameterNames();查看有什么参数

    接收参数值

    if(null!=request.getParameter("rows")) {             pageRows=Integer.parseInt(request.getParameter("rows").toString());  

       }  

       if(null!=request.getParameter("page")) {  

           page=Integer.parseInt(request.getParameter("page").toString());  

       } 

       if(null!=request.getParameter("order")) {  

           order=request.getParameter("order").toString();  

       }

       if(null!=request.getParameter("sort")) {  

           order=request.getParameter("sort").toString();  

         }

    然后拼装sql语句实现分页。


 增加查询参数,重新加载表格
function reloadgrid (stateVal)  {  

       //查询参数直接添加在url中         

       /* var url =$('#test').datagrid('options').url;

        url = "http://127.0.0.1:8080/web/AppAndRemoveServer.server?state=" +stateVal;   

//重新赋值url 属性

        $('#test').datagrid('options').url=url;

        $("#test").datagrid('reload'); 

        */

        

        //查询参数直接添加在queryParams中    

        var queryParams = $('#test').datagrid('options').queryParams;  

         queryParams.state = stateVal;  

         $('#test').datagrid('options').queryParams=queryParams;        

         $("#test").datagrid('reload'); 

        

    }
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DynamicDatagird.aspx.cs"     
    Inherits="WebUtils.DynamicDatagird" %>     
     
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">     
<html xmlns="http://www.w3.org/1999/xhtml">     
<head runat="server">     
    <title>动态datagrid</title>     
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>     
    <script src="Scripts/jquery.easyui.min.js" type="text/javascript"></script>     
    <link href="Style/themes/default/easyui.css" rel="stylesheet" type="text/css" />     
    <script type="text/javascript">     
        $(function () {      
            $('#tbUsers').datagrid({      
                title: 'My Title',      
                width: 600,      
                height: 350,      
                dataType: 'json',      
                url: 'GetAjaxData.ashx?action=GetUserList2',      
                columns: [[]],      
                pagination: true,      
                pageSize: 5,                //每页记录数      
                pageList: [5, 10, 15, 20, 30, 50], //分页记录数数组      
                onLoadSuccess: function (data, param) {      
                          
                }      
            });      
        });      
    </script>     
</head>     
<body>     
    <form id="form1" runat="server">     
    <div>     
        <table id="tbUsers">     
        </table>     
    </div>     
    </form>     
</body>     
</html>
  • 动态绑定列名
  1. 定义JDataGrid类和JColumn类
  2. 后台获取数据(一般处理程序)
public class JDataGrid {      
     
    public int total { get; set; }      
    public List<Dictionary<string, object>> rows { get; set; }      
    public List<JColumn> columns { get; set; }      
     
    public static List<Dictionary<string, object>> ConvertRows(IList list) {      
        List<Dictionary<string, object>> rowsList=new List<Dictionary<string, object>>();      
        if (list != null) {      
            foreach (object obj in list) {      
                Dictionary<string, object> dic = new Dictionary<string, object>();      
                Type t = obj.GetType();      
                foreach (PropertyInfo pi in t.GetProperties()) {      
                    string key = pi.Name;      
                    object value=pi.GetValue(obj, null);      
                    dic.Add(key, value);      
                }      
                rowsList.Add(dic);      
            }      
        }      
        return rowsList;      
    }      
     
    public string ConvertToJson() {      
        StringBuilder sb = new StringBuilder();      
        sb.AppendFormat("{{/"total/":{0},/"rows/":[", total);      
        //添加数据      
        if (rows != null && rows.Count > 0) {      
            for (int i = 0; i < rows.Count; i++) {      
                sb.Append("{");      
                foreach (string key in rows[i].Keys) {      
                    if (rows[i][key] is ValueType) {      
                        sb.AppendFormat("/"{0}/":{1},", key, rows[i][key]);      
                    } else {      
                        sb.AppendFormat("/"{0}/":/"{1}/",", key, rows[i][key]);      
                    }      
                }      
                sb.Remove(sb.Length - 1, 1);      
                sb.Append("}");      
                if (i != rows.Count - 1) {      
                    sb.Append(",");      
                }      
            }      
        }      
        sb.Append("],");      
        sb.Append("/"columns/":[");      
        //添加列      
        if (columns != null && columns.Count > 0) {      
            for (int i = 0; i < columns.Count; i++) {      
                sb.Append(columns[i].ConvertToJson());      
                if (i != columns.Count - 1) {      
                    sb.Append(",");      
                }      
            }      
        }      
        sb.Append("]}");      
        string str=sb.ToString();      
        return str;      
    }      
}      
     
public class JColumn {      
    public int rowspan { get; set; }      
    public int colspan { get; set; }      
    public bool checkbox { get; set; }      
    public string field { get; set; }      
    public string title { get; set; }      
    public int width { get; set; }      
    public string align { get; set; }      
     
    public string ConvertToJson() {      
        StringBuilder sb = new StringBuilder();      
        sb.Append("{");      
        if (rowspan != null) {      
            sb.AppendFormat("/"rowspan/":{0},", rowspan);      
        }      
        if (colspan != null) {      
            sb.AppendFormat("/"colspan/":{0},", colspan);      
        }      
        if (checkbox != null) {      
            sb.AppendFormat("/"checkbox/":{0},", checkbox);      
        }      
        sb.AppendFormat("/"field/":/"{0}/",", field);      
        sb.AppendFormat("/"width/":{0},", width);      
        sb.AppendFormat("/"align/":/"{0}/",", align);      
        sb.AppendFormat("/"title/":/"{0}/",", title);      
        sb.Remove(sb.Length - 1, 1);      
        sb.Append("}");      
        String str = sb.ToString();      
        return str;      
    }      
}
public void GetUserList2(HttpContext context) {      
     List<User> userList = new List<User>();      
     for (int i = 0; i < 10; i++) {      
         userList.Add(new User {      
             Name = "Name" + (i + 1),      
             Age = 20 + i,      
             Gender = i % 3 == 0 ? "男" : "女",      
             Hobby = i.ToString()      
         });      
     }      
     List<JColumn> colList = new List<JColumn>() {      
         new JColumn{field="Name",title="姓名",width=100,align="center"},      
         new JColumn{field="Age",title="年龄",width=100,align="center"},      
         new JColumn{field="Gender",title="性别",width=50,align="center"},      
         new JColumn{field="Hobby",title="兴趣",width=150,align="center"},      
     };      
     JDataGrid dg = new JDataGrid {      
         total=20,      
         rows=JDataGrid.ConvertRows(userList),      
         columns=colList,      
     };      
     string strJson = dg.ConvertToJson();      
     HttpResponse response = context.Response;      
     response.ContentType = "text/json";      
     response.Write(strJson);      
 }