您的位置:首页 > 产品设计 > UI/UE

easyui 分页表格插件带搜索

2017-01-18 09:27 330 查看
html代码:

<div class="row">
<form id="manufactureFormSearch">
<table class="formtable">
<tr>
<td><label for="manufactureName">制造商名称:</label></td>
<td><input type="text" name="manufactureName" class="easyui-textbox" placeholder="制造商名称"></td>
<td><label for="manufactureNameEn">制造商英文名称:</label></td>
<td><input type="text" name="manufactureNameEn" class="easyui-textbox" placeholder="制造商英文名称"></td>
</tr>
<tr>
<td><label for="createUserid">创建人账号:</label></td>
<td><input type="text" name="createUserid" class="easyui-textbox" placeholder="创建人账号"></td>
<td><label for="createTime">创建起止时间:</label></td>
<td>
<input type="text" name="createTimeFrom" class="easyui-datetimebox" placeholder="创建开始时间">~
<input type="text" name="createTimeTo" class="easyui-datetimebox" placeholder="创建结束时间">
</td>

</tr>
<tr>
<td><label for="updateUserid">最后一次更新人账号:</label></td>
<td><input type="text" name="updateUserid" class="easyui-textbox" placeholder="最后一次更新人账号"></td>
<td><label for="updateTime">最后一次更新起止时间:</label></td>
<td>
<input type="text" name="updateTimeFrom" class="easyui-datetimebox" placeholder="最后一次更新开始时间">~
<input type="text" name="updateTimeTo" class="easyui-datetimebox" placeholder="最后一次更新结束时间">

</td>

</tr>
<tr>
<td><label for="status">状态:</label></td>
<td>
<select id="statusOption" class="easyui-combobox" name="status" style="width:100px;">
<option value="-1">----请选择----</option>
<option value="0">未激活</option>
<option value="1">已激活</option>
</select>

</td>
</tr>
</table>
<div>
<a href="#" onclick="searchManufacture()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>
</form>
</div>
<div class="row">
<div id="manufactureTableToolBar">
<a href="#" onclick="showManufactureDialog()" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">新增</a>
</div>
<table id="manufactureTable">
<thead>
<tr>
<th data-options="field:'id'">制造商编号</th>
<th data-options="field:'manufactureName'">制造商名称</th>
<th data-options="field:'manufactureNameEn'">制造商英文名称</th>
<th data-options="field:'manufactureWebsite'">制造商网站</th>
<th data-options="field:'manufactureImage',formatter:manufactureImageFormatter">制造商图片</th>
<th data-options="field:'createUserid'">创建人账号</th>
<th data-options="field:'createTime',formatter:dateFormatter">创建时间</th>
<th data-options="field:'updateUserid'">最后一次更新人账号</th>
<th data-options="field:'updateTime',formatter:dateFormatter">最后一次更新时间</th>
<th data-options="field:'status',formatter:manufactureStatusFormatter">状态</th>
<th data-options="field:'action',formatter:manufactureActionFormatter,width:100">操作</th>
</tr>
</thead>
</table>
</div>
js代码:
var MANUFACTURE_API_BASE_URL = "${rc.contextPath}/manufacture/";
$(function() {
$('#manufactureTable').datagrid({
toolbar:'#manufactureTableToolBar',
pagination : true,//显示分页
pageSize : 20,//分页大小
pageList : [ 20, 50, 100 ],
loader : manufactureTableLoader,
onDblClickRow : showManufactureDialog
});

})
function manufactureTableLoader(param, success, error) {

var queryParams = $('#manufactureFormSearch').serializeJson();
queryParams.pageIndex = param.page;
queryParams.pageSize = param.rows;
if(queryParams.status=="-1"){
queryParams.status="";
}
queryParams.createTimeFrom= date2Long(queryParams.createTimeFrom);
queryParams.createTimeTo=date2Long(queryParams.createTimeTo);
queryParams.updateTimeFrom=date2Long(queryParams.updateTimeFrom);
queryParams.updateTimeTo=date2Long(queryParams.updateTimeTo);

$.ajax({
type : "post",
url : MANUFACTURE_API_BASE_URL + "query.html",
data : queryParams,
dataType : "json",
success : function(res) {
var result = {};
result.total = res.total;
result.rows = res.records;
success(result);
},
error : function() {
error.apply(this, arguments);
}
});

function searchManufacture() {
$('#manufactureTable').datagrid("getPager").pagination("select",1);
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: