EasyUI使用笔记——Datagrid的使用及排序
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(',');
}再下面开始贴图了：
本文作者：老徐
本文链接：https://cloud.tencent.com/developer/article/1405694
转载时须注明出处及本声明
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读