Jquery Easyui Datagrid创建代码
2012-08-25 13:14
99 查看
引用easyui
javascript代码
html代码
本文出自 “IT笔记本” 博客,请务必保留此出处http://ddyyjj.blog.51cto.com/2055510/972877
<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>
本文出自 “IT笔记本” 博客,请务必保留此出处http://ddyyjj.blog.51cto.com/2055510/972877
相关文章推荐
- JQuery easyui datagrid 编辑中,js代码设置级联效果
- jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
- jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
- JQuery easyUI DataGrid 创建复杂列表头
- JQuery easyUI DataGrid 创建复杂列表头
- 代码创建Silverlight 中DataGrid的模板列
- Jquery easyui datagrid 添加提示的js代码
- 用代码创建DataGrid的多链接及checkbox事件响应(downmoon)
- jQuery EasyUI 应用 - 创建 CRUD 数据网格(DataGrid)
- Jquery easyUI 创建tab的同时,动态生成datagrid
- jQuery easyUI datagrid 增加求和统计行的实现代码
- 用代码创建DataGrid的多链接及checkbox事件响应
- 用代码创建DataGrid的多链接及checkbox事件响应(收藏)
- WPF DataGrid的创建,前台代码构建,后台代码构建
- 虽然动态创建DataGrid的代码在网上有很多,但是作为表单提交的时候却不多见?
- 用代码创建DataGrid的多链接及checkbox事件响应
- easyUI 在主datagrid上创建子datagrid
- ExtJS4.0源代码分析----类系统之类的创建
- .NET 通过代码创建带属性的XML文档
- Github全面详解-06 创建代码仓库