带分页的datagrid弹窗实现

最新推荐文章于 2026-06-14 15:17:52 发布

原创最新推荐文章于 2026-06-14 15:17:52 发布 · 555 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javascript

本文介绍了如何使用jQuery和datagrid创建一个带分页功能的弹出窗口，详细展示了页面HTML结构、JavaScript代码，包括弹窗构造、表格数据加载、分页配置以及与服务器端交互的实现。在获取数据后，根据服务端返回的状态信息更新额外字段的展示。

本文不介绍基本的引入框架操作

页面准备，页面需要代码如下：

</div>

</table>

</div>

其中，id为resultMessage的div是为了展示分页列表外的额外字段展示的。

js代码：

调用入口：可用事件调用，本文用的页面加载事件。并且可根据具体业务需求设置显示条件。

jQuery(function () {

constructPopupWindow();

if($("#processNodeId").val() == 'UserTask1500383916906'){

setTimeout(function () {

assetAllocationTable();

$("#resourceWindow").show();

}, 800);

}else {

$("#resourceWindow").hide();

}

})

构造弹出框方法：

function constructPopupWindow() {

$('#resourceWindow').dialog({

width: 980,

height: 470,

left: '588px',

top: '70px',

closable: true,

closed: true,

'z-index': 9008,

resizable: false,

draggable: true,

collapsible: false,

minimizable: false,

maximizable: false,

inline: false,

modal: false,

shadow: false,

title: "返利规则状态"

});

}

具体调用方法：

function assetAllocationTable(options) {

constructSearchTable();

//移动到屏幕中央

$('#resourceWindow').panel("move", {

top: $(document).scrollTop() + ($(window).height() - 400) * 0.5,

left: ($(window).width() - 980) * 0.5

});

//弹出选择表

$("#resourceWindow").window("open");

}

填充列表数据方法：

function constructSearchTable() {

$("#couponRulesTable").datagrid({

loader: function (params, success, error) {

// var batchNo = $("#jd_batchId").val();

var batchNo = '1001';

var pageNo = params.page;

//var pageNo = 1;

var pageSize = params.rows;

//var pageSize = 100;

jQuery.ajax({

type: "POST",

url: "/di/datasource/datasource_getResultList",

data: {

"datasourceId": dataSourceIds.getCouponInfo,

"paramsStr": "{'batchNo':'" + batchNo + "','pageSize':'" + pageSize + "','pageNo':'" + pageNo + "'}"

async: false,

dataType: "json",

success: function (resp) {

if (resp != null && resp != "") {

var data = JSON.parse(resp[0].result);

if(data.isSuccess){

var resultObj={

'total':data.totalNum,

'rows':data.records

};

var innerStatus = data.attrs.status;

var innerMessage;

if(innerStatus == 1){

innerMessage = '全部审核通过';

}

if(innerStatus == 2){

innerMessage = '全部未审核通过';

}

if(innerStatus == 3){

innerMessage = '部分审核通过';

}

$('#resultMessage').html('查询成功:' + innerMessage);

success(resultObj);

}else{

$("#resultMessage").html(data.message);

//$("#resourceWindow").hide();

//alert(data.message);

$("#couponRulesTable").datagrid('loadData', {total: 0, rows: []});

}

} else {

error();

$("#couponRulesTable").datagrid('loadData', {total: 0, rows: []});

}

});

pagination: true,

rownumbers: true,

striped:true,

pageSize:100,

loadMsg:false,

pageList:[10,20,30,40,50,100],

columns: [[

{field: "agrNo", title: "协议编号", width: 150},

{field: "ruleId", title: "规则编号", width: 150},

{field: "supplierCode", title: "供应商简码", width: 200, editor: {type: 'text'}},

{field: "supplierName", title: "供应商名称", width: 250, editor: {type: 'text'}},

{field: "groupId", title: "组别编号", width: 100},

{field: "groupName", title: "组别名称", width: 150},

{field: "deptId", title: "部门编号", width: 100},

{field: "deptName", title: "部门名称", width: 100},

{field: "relatedBuyers", title: "采销员erp", width: 100},

{field: "nickName", title: "采销员姓名", width: 100},

{field: "status", title: "协议状态", width: 100,

formatter:function(value){

if(value==1){

return '新建';

}

if(value==2){

return '新建审核中';

}

if(value==3){

return '已审核';

}

if(value==4){

return '已完成';

}

if(value==5){

return '已失效';

}

]]

, onSelect: function (rowIndex, rowData) {

}, onUnselect: function (rowIndex, rowData) {

}, onClickRow: function (rowIndex, rowData) {

}

});

}

其中jQuery.ajax方法用于从服务端获取数据，接收到数据后，主要设置两个参数，一个为total，即数据总条数，一个为rows，即具体数据。

另外在此ajax中还可以拿到服务端数据后做一些其它处理，比如在弹出页面展示额外数据等。

3、服务端代码：

此处不贴代码，正常的方法根据入参返回数据即可，返回数据要转换为标准json格式。

效果图示：