引用easyui

<linkrel="stylesheet"type="text/css"href="../themes/default/easyui.css"><linkrel="stylesheet"type="text/css"href="../themes/icon.css"><linkrel="stylesheet"type="text/css"href="demo.css"><scripttype="text/javascript"src="../jquery-1.7.2.min.js"></script><scripttype="text/javascript"src="../jquery.easyui.min.js"></script>

javascript代码

$(function(){ $('#tt').datagrid({ url:'datagrid_data2.json', columns:[[ {field:'productid', title:'ProductID', width:120 //rowspan:2 //colspan:2 //align:'center' //sortable:true //resizable:true //hidden:true //checkbox:true //formatter:function(value,row,index){} //styler:function(value,row,index){} //sorter:function(a,b){} //editor:string,object }, {field:'listprice',title:'ListPrice',width:80,align:'right'}, {field:'unitcost',title:'UnitCost',width:80,align:'right'}, {field:'attr1',title:'Attribute',width:250}, {field:'status',title:'Status',width:60,align:'center'} ]], frozenColumns:[[ {field:'ck',checkbox:true}, {field:'itemid',title:'ItemID',width:80,sortable:true} ]], //fitColumns:false,//true会导致列错位 //autoRowHeight:true, toolbar:[{ iconCls:'icon-edit', text:'编辑', handler:function(){alert('edit')} },'-',{ iconCls:'icon-help', text:'帮助', handler:function(){alert('help')} }], //striped:true,//条纹行，以区分行 //method:'post', //nowrap:true,//false设置数据自动换行 //idField:'itemid', loadMsg:'请稍候...', pagination:true,//分页栏 rownumbers:true,//第一列显示自增序列 singleSelect:true//checkOnSelect:true, //selectOnCheck:true, //pagePosition:'both', //pageNumber:1, //pageSize:10, //pageList:[10,20,30,40,50], //queryParams:{ //name:'easyui', //subject:'datagrid' //}, //sortName:'itemid', //sortOrder:'desc', //remoteSort:false,//true发送命令到服务器请求排序数据，false本地自己排序 //showHeader:true, //showFooter:true, //scrollbarSize:18, //rowStyler:function(index,row,css){} //loader:'jsonloader', //loadFilter:function(data){} //editors:'predefinededitors', //view:'defaultview' }); //设置分页控件 $('#tt').datagrid('getPager').pagination({ pageSize:10,//每页显示的记录条数，默认为10 pageList:[5,10,15],//可以设置每页记录条数的列表 beforePageText:'第',//页数文本框前显示的汉字 afterPageText:'页共{pages}页', displayMsg:'当前显示{from}-{to}条记录共{total}条记录' /*onBeforeRefresh:function(){ $(this).pagination('loading'); alert('beforerefresh'); $(this).pagination('loaded'); }*/ }); });


html代码

<tableid="tt"></table>