中文帮助请点这里：中文属性详解
以下为未完结版
<!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:',100}, {field:'parent_id',title:'父类id:',100}, {field:'date_added',title:'添加时间:',100,align:'right'}, {field:'categories_status',title:'状态',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数据 700, title:'测试' }); }); </script> </body> </html>