引用easyui
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../themes/icon.css"> <link rel="stylesheet" type="text/css" href="demo.css"> <script type="text/javascript" src="../jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../jquery.easyui.min.js"></script>
javascript代码
$(function(){ $('#tt').datagrid({ url:'datagrid_data2.json', columns:[[ { field:'productid', title:'Product ID', 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:'List Price',width:80,align:'right'}, {field:'unitcost',title:'Unit Cost',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:'Item ID',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:'json loader', //loadFilter:function(data){} //editors:'predefined editors', //view:'default view' }); //设置分页控件 $('#tt').datagrid('getPager').pagination({ pageSize: 10,//每页显示的记录条数,默认为10 pageList: [5,10,15],//可以设置每页记录条数的列表 beforePageText: '第',//页数文本框前显示的汉字 afterPageText: '页 共 {pages} 页', displayMsg: '当前显示 {from} - {to} 条记录 共 {total} 条记录' /*onBeforeRefresh:function(){ $(this).pagination('loading'); alert('before refresh'); $(this).pagination('loaded'); }*/ }); });
html代码
<table id="tt"></table>
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。