jquery easyui Data Gridデータテーブルのプロパティ
27980 ワード
中国語の助けはここをクリックしてください:中国語の属性
以下未完版
以下未完版
<!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>