EasyUI使用笔记——Datagrid的使用及排序

December 19, 2015

2273 views

1535 words

Datagrid的使用：
添加一个table,其中class设置为easyui-datagrid，在data-options中设置datagrid的参数，我这里是这样写的：

<table class="easyui-datagrid" title="营业部管理" style="width:100%;"
       data-options="rownumbers:true,singleSelect:true,url:'/system/DepartmentList',method:'post',toolbar:'#tb',footer:'#ft',multiSort:true,remoteSort:true,pagination:true,
pageSize:10">
    <thead>
        <tr>
            <th data-options="field:'department',width:240, sortable:true">营业部名称</th>
            <th data-options="field:'province',width:100,align:'right', sortable:true">所在省份</th>
            <th data-options="field:'city',width:100,align:'right', sortable:true">所在城市</th>
            <th data-options="field:'superintendent',width:80, sortable:true">负责人</th>
            <th data-options="field:'builddate',width:120, sortable:true">成立日期</th>
            <th data-options="field:'address'">地址</th>
        </tr>
    </thead>
</table>

其中：
rownumbers表示是否显示行号， singleSelect表示单选 url异步取数据用的链接（就是从哪取数据），返回的是json格式

method取数据时提交方式，post或者get，我这里用的是get toolbar工具条，在头部显示的，后面给出代码

footer底部显示的，后面给出代码 multiSort多项排序

remoteSort远程排序，就是把排序数据提交到服务器，由服务器排序后返回，我这里是提交在服务器排序 pagination是否启用分页

pageSize在启用分页时生效，表示每页记录集的条数

下面是toolbar的代码，没什么东西，HTML的：

<div id="tb" style="padding:2px 5px;">
    <table>
        <tr>
            <td>
                <label>营业部名称：</label><input class="easyui-textbox" type="text" style="width:100px;" name="name" />
            </td>
            <td>
                <label>负责人：</label><input class="easyui-textbox" type="text" style="width:100px;" name="name" />
            </td>
            <td>
                <label>所在城市：</label>
                <input class="easyui-combobox" id="s_province" name="province" />
                <input class="easyui-combobox" id="s_city" name="city" />
            </td>
            <td>
                <label>成立日期：</label>
                <input class="easyui-datebox" style="width:110px"> 至 <input class="easyui-datebox" style="width:110px">
            </td>
            <td>
                <div class="buttonActive"><div class="buttonContent"><a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitSearch()">检索</a></div></div>
            </td>
        </tr>
    </table>
</div>

再下面是footer的代码，也是HTML的：

<div id="ft" style="padding:2px 5px;">
    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" title="新增营业部" onclick="$('#add').window('open')"></a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" title="修改选中"></a>
    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" title="删除选中"></a>
</div>

排序相关的：

在点表头进行排序时，会向服务器提交排序数据，两个参数，分别是sort和order，如果是多项排序的话，会分别使用半角逗号（“,”）进行分割，服务器需要自行组成SQL的排序字符串，代码非常简单，如下：

/// <summary>
/// 生成排序SQL
/// </summary>
/// <param name="order">排序规则</param>
/// <param name="sort">参与排序的字段</param>
/// <returns></returns>
public static string orderby(string order,string sort)
{
    StringBuilder sb = new StringBuilder();
    string[] array_order = order.Split(',');
    string[] array_sort = sort.Split(',');
    for(int i=0;i<array_sort.Length;i++)
    {
        sb.Append(string.Format("{0} {1},", array_sort[i].Trim(), array_order[i].Trim()));
    }
                
    return sb.ToString().TrimEnd(',');
}

再下面开始贴图了：