您的位置:首页 > Web前端 > JQuery

Jquery Easyui Datagrid创建代码

2012-08-25 13:14 99 查看
引用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>


本文出自 “IT笔记本” 博客,请务必保留此出处http://ddyyjj.blog.51cto.com/2055510/972877
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: