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

@老徐  December 19, 2015

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(',');
}

再下面开始贴图了:
201607231469245455458720.png


添加新评论