Easyui 分页 官方文档修改后很容易懂

来源:互联网 发布:mac链接不上硬盘 编辑:程序博客网 时间:2024/06/06 16:29

JSP:

<table id="datagrid名" data-options="fitColumns:true,singleSelect:true,pagination:true,striped:true,autoRowHeight:true"  style="height:100%">   

      <thead>   
       <tr>  
            <th data-options="field:'1',halign:'center'" width="10%"></th>  
           <th data-options="field:'2',halign:'center'" width="10%"></th>   
           <th data-options="field:'3',halign:'center'" width="10%" ></th>   
           <th data-options="field:'4',halign:'center'" width="10%"></th>
           <th data-options="field:'5',halign:'center'" width="10%"></th>
           <th data-options="field:'6',halign:'center'" width="10%"></th>  
           <th data-options="field:'7',halign:'center'" width="10%"></th>  
           <th data-options="field:'8',halign:'center'" width="10%"></th>  
           <th data-options="field:'9',halign:'center'" width="10%"></th>
           <th data-options="field:'10',halign:'center'" width="10%">s</th>    
       </tr>   
   </thead>  

</table>

注意:不要加class="easyui-datagrid",切记要加singleSelect:true


js:

第一步不需要更改任何

function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){// is array
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
         pageList: [10, 20, 30, 40, 50],  
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}


第二部:只需要改url,然后把后台获取的值(直接可以是查询所有的值,下面的result就是返回结果)通过循环一一赋值给数组rows

function getData(){
var rows = [];
$.ajax({
url:"查询所有的sql语句",

dataType:"JSON",
type:"post",
async:false,
success:function(result){
console.info(result);
for ( var i = 0; i < result.length; i++) {
rows.push({
1:result[i].1,
2:result[i].2,
3:result[i].3,
           4:result[i].4,
                       5:result[i].5
});
}
}

});
return rows;
}




把返回的值就可以赋给datagrid,记住名字要一一对应包括大小写

function loadFinalTestDatagrid(){
$('#FinalTestDatagrid').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
}


下面是初始化就加载,看你需要了,我反正全是初始化就加载完的

$(function(){

loadFinalTestDatagrid();

});

原创粉丝点击