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

jquery easyui DataGrid 数据表格属性

2015-06-18 18:01 585 查看

中文帮助请点这里：中文属性详解

以下为未完结版

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<link rel='stylesheet' type='text/css' href='__PUBLIC__/Css/common.css'>
<link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="http://www.cheap-louisvuittonoutlet.net/easyui/demo/demo.css">
<script type="text/javascript" src="http://www.cheap-louisvuittonoutlet.net/easyui/jquery.min.js"></script>
<script type="text/javascript" src="http://www.cheap-louisvuittonoutlet.net/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery"></script>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<table id="dg" ></table>
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">新增</a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true">编辑</a>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#dg').datagrid({
columns:[[
{field:'categories_id',title:'分类ID:',width:100},
{field:'parent_id',title:'父类id:',width:100},
{field:'date_added',title:'添加时间:',width:100,align:'right'},
{field:'categories_status',title:'状态',width:100,align:'right'}
]],//columns 列的数组属性
fitColumns:'true',//当此属性为true时所有列会均匀的充满datagrid的宽度,True 就会自动扩大或缩小列的尺寸以适应表格的宽度并且防止水平滚动
autoRowHeight:'true',//当true时，根据内容调整表格行的高度
toolbar:'#tb',//工具栏，指定1个div的id
striped:'true',//为true就是隔行变色
nowrap:'true',//True 就会把数据显示在一行里
method:'post',//请求远程数据的请求方法
idField:'categories_id',//标识字段,主键的字段
url:'/index.php/__URL__/getJson',//从远程站点获得数据的 URL默认post过去两个参数page:第几页,rows:每页的条数
loadMsg:'加载数据的时候,请稍等',//从远处加载数据，正在加载的提示信息
pagination:true,//为true时显示分页工具栏在datagrid 底部,默认为false
rownumbers:true,//显示数据表格的行号，默认为false
singleSelect:false,//为true的时候只能单行选择，默认为false的时候可以选择多行
ctrlSelect:true,//为true时按着ctrl可以选多行
pagePosition:'bottom',//设置分页控件的位置，默认为bottom，在griddata的下方  有值'top','bottom','both'.both是上下都显示
pageNumber:1,//初始化是第几页
pageSize:10,//每页多少条记录
pageList:[5,10,20,30,40,50],//每页可显示的条数
queryParams:{
name: 'easyui',
subject: 'datagrid'
},//url那个post过去的参数多了这两个参数，默认为空{}
sortName:'categories_id',//定义哪些列可排序，默认为null
sortOrder:'desc',//asc 或者desc
multiSort:'true',//多列排序
remoteSort:'false',//Defines if to sort data from server
showHeader:'false',//是否显示行头默认为true
showFooter:'false',//是否显示脚
rowStyler:function(index,row){
if(index%2==0){
return 'color:green';
}
},//行下标可整除2,字体颜色设置成green
loadFilter:function(data){
if(data.d){
return data.d;
}else{
return data;
}
},//asp.net 的时候data.d才是所要的json数据
width:700,
title:'测试'
});
});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

jquery easyui DataGrid 数据表格 属性

jquery easyui DataGrid 数据表格属性