datagrid 前端分页

cxyJtt

于 2020-06-09 10:28:00 发布

阅读量365

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/cxyJtt/article/details/106657530

本文详细介绍了如何在前端应用中利用Datagrid组件进行数据分页显示，涵盖了配置分页参数、处理分页事件、优化用户体验等方面的关键步骤，帮助开发者实现高效的数据浏览体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var mygrid1 

$(function(){

    mygrid1 = $("#datagrid1");
    mygrid1.datagrid({
        width: '100%',  
        height: '94%',
        url: ctx + "/storage/transfer/listBoxAction.json",  
        columns:[[
            /* {field:'id',hidden:true}, */
            {field:'status',title:'状态',width:200,align:'center',formatter:function(value,row,index){
                if(isNull(row.measureSign) || row.measureSign == 0){
                    return '<span style="color:blue">未测量</span>';
                }
                if(row.measureSign == 1){
                    return '<span style="color:green">已测量</span>'
                }
            }},
            {field:'orderNo',title:'入库单号',width:150,align:'center'}, 
            {field:'strBoxNumber',title:'箱号',width:200,align:'center',formatter:function(value,row,index){
                return row.orderNo+"-"+row.boxNumber;
            }},
            {field:'boxNumber',title:'箱序号',width:100,align:'center'},
            {field:'warehouse',title:'目的仓',width:100,align:'center',formatter:function(value,row,index){
                return row.warehouseCode+"【"+row.warehouseName+"】";
            }}, 
            {field:'channel',title:'渠道',width:120,align:'center',formatter:function(value,row,index){
                return row.channelCode+"【"+row.channelName+"】";
            }}, 
            {field:'size',title:'尺寸(CM)',align:'center',width:150,formatter:function(value,row,index){
                return row.strBoxLength+"x"+row.strBoxWidth+"x"+row.strBoxHeight;
            }},
            {field:'strBoxWeight',title:'重量(KG)',align:'center',width:100},
            {field:'operation',title:'操作',align:'center',width:100,formatter:function(value,row,index){
                var obj ="<a href=\"javascript:void(0)\" class=\"operate\" style=\"color:#0090e1;font-size:12px;\" onclick=\"self.parent.addTab('箱子测量:"+row.orderNo+"-"+row.boxNumber+"','"+(ctx+'/storage/transfer/toMeasureBox?id='+row.id)+"')\">测量</a><br/>";
                return obj;
            }},
        ]],
        striped: true,
        rownumbers: false,
        singleSelect: true,
        checkOnSelect:true,
        selectOnCheck:false,
        queryParams: $('#searchForm').serializeObject(),
        fitColumns: true,
        nowrap: true,
        pagination: true,
        pageSize: 20,
        pageList: [20,50,100,200,500,1000], 
    });
    mygrid1.datagrid({loadFilter:getPager}).datagrid('loadData', getGridData());
});
function getPager(data){
    if (typeof data.length == 'number' && typeof data.splice == 'function'){
        data = {
            total: data.length,
            rows: data
        }
    }
    var options = mygrid1.datagrid('options');
    var pager = mygrid1.datagrid('getPager');
    pager.pagination({
        onSelectPage:function(pageNum, pageSize){
            options.pageNumber = pageNum;
            options.pageSize = pageSize;
            pager.pagination('refresh',{
                pageNumber:pageNum,
                pageSize:pageSize
            });
            mygrid1.datagrid('loadData',data);
        }
    });
    if (!data.originalRows){
        data.originalRows = (data.rows);
    }
    var start = (options.pageNumber-1)*parseInt(options.pageSize);
    var end = start + parseInt(options.pageSize);
    data.rows = (data.originalRows.slice(start, end));
    return data;
}
function getGridData(){
    var rows = mygrid1.datagrid("getRows");
    return rows;
}