1  <link href="http://www.cnblogs.com/lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
2  <script src="http://www.cnblogs.com/lib/jquery/jquery-1.5.2.min.js" type="text/javascript"></script>
3  <script src="http://www.cnblogs.com/lib/ligerUI/js/ligerui.min.js" type="text/javascript"></script> 

 1     <div id="maingrid"></div>
 2     <script type="text/javascript">
 3     var griddata = [
 4             { id: '01', name: '部门01' },
 5             { id: '02', name: '部门02' },
 6             { id: '03', name: '部门03' },
 7             { id: '04', name: '部门04' },
 8             { id: '05', name: '部门05' },
 9             { id: '06', name: '部门06' },
10             { id: '07', name: '部门07' }
11         ];
12 
13      var grid = $("#maingrid").ligerGrid({
14             columns: [
15                 { name: 'id', display: '序号', width: 200 },
16                 { name: 'name', display: '名称', width: 300 }
17             ],
18             data: { Rows: griddata }
19         }); 
20 </script>

 1   {
 2         Rows: [
 3             { id: '01', name: '部门01' },
 4             { id: '02', name: '部门02' },
 5             { id: '03', name: '部门03' },
 6             { id: '04', name: '部门04' },
 7             { id: '05', name: '部门05' },
 8             { id: '06', name: '部门06' },
 9             { id: '07', name: '部门07' }
10         ]
11   }

 1         {
 2             Rows: [
 3             { id: '01', name: '部门01', children: [
 4                 { id: '0101', name: '部门0101' },
 5                 { id: '0102', name: '部门0102' },
 6                 { id: '0103', name: '部门0103' }
 7             ]
 8             },
 9             { id: '02', name: '部门02' },
10             { id: '03', name: '部门03' },
11             { id: '04', name: '部门04' },
12             { id: '05', name: '部门05' },
13             { id: '06', name: '部门06' },
14             { id: '07', name: '部门07' }
15         ]
16         }

 1 {
 2     display: '序号',         //表头列显示的文本,支持html
 3     //表头内容自定义函数
 4     headerRender: function (column) {
 5         return "<b>" + column.display + "</b>";
 6     },
 7     name: 'id',              //单元格映射的行数据属性 
 8     align: 'center',           //单元格内容对齐方式:left/center/right    
 9     hide: false,             //是否隐藏
10     width: 100,              //列的宽度
11     minWidth: 50,            //列的最小宽度
12     isSort: true,            //是否允许此列排序,默认为允许排序 
13     isAllowHide: true,       //是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】
14     type: 'string',          //类型,用于排序
15     //自定义单元格渲染器
16     render : function (record, rowindex, value, column) {
17         //this     这里指向grid
18         //record   行数据
19         //rowindex 行索引
20         //value    当前的值，对应record[column.name]
21         //column   列信息
22         return value;  //返回此单元格显示的HTML内容(一般根据value和row的内容进行组织)
23     },
24     //列汇总
25     totalSummary: {
26         align: 'center',   //汇总单元格内容对齐方式:left/center/right 
27         type: 'count',     //汇总类型sum,max,min,avg ,count。可以同时多种类型
28         render: function (e) {  //汇总渲染器，返回html加载到单元格
29             //e 汇总Object(包括sum,max,min,avg,count) 
30             return "<div>总数：" + e.count + "</div>";
31         }
32     },
33     //单元格编辑器
34     editor: {
35         type: 'text'
36     },
37     //多表头支持
38     columns: null
39 },

1 {
2     display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html
3     name: 'name',
4     align: 'left'
5 },

1 //表头内容自定义函数
2 headerRender: function (column) {
3        return "<b>" + column.display + "</b>";
4 },

1  { name: 'id', display: '序号', width: 200 },
2  { name: 'name', display: '名称', width: 300 }

 1 $.ligerDefaults.Grid.formatters['currency'] = function (num, column) {
 2             //num 当前的值
 3             //column 列信息
 4             if (!num) return "$0.00";
 5             num = num.toString().replace(/\$|\,/g, '');
 6             if (isNaN(num))
 7                 num = "0.00";
 8             sign = (num == (num = Math.abs(num)));
 9             num = Math.floor(num * 100 + 0.50000000001);
10             cents = num % 100;
11             num = Math.floor(num / 100).toString();
12             if (cents < 10)
13                 cents = "0" + cents;
14             for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
15                 num = num.substring(0, num.length - (4 * i + 3)) + ',' +
16         num.substring(num.length - (4 * i + 3));
17             return "$" + (((sign) ? '' : '-') + '' + num + '.' + cents);
18         };

1 { display: '单价', name: 'UnitPrice', align: 'right' ,type:'currency' }

 1 var grid = $("#maingrid").ligerGrid({
 2             columns: [
 3                 { name: 'id', display: '序号', width: 100,
 4                     render: function (record, rowindex, value, column) {
 5                         //this     这里指向grid
 6                         //record   行数据
 7                         //rowindex 行索引
 8                         //value    当前的值，对应record[column.name]
 9                         //column   列信息
10                         return "<a href='edit.htm?id=" + value + "'>编辑</a>";
11                     }
12                 },
13             { name: 'id', display: '序号', width: 120,
14                 render: function (record, rowindex, value, column) {
15                     return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>';
16                 }
17             }, 
18                 { name: 'name', display: '名称', width: 300 }
19             ],
20             data: { Rows: griddata }
21         }); 

1 editor: { type: 'spinner' }

1 usePager: false

 1  var grid = $("#maingrid").ligerGrid({
 2             columns: [
 3                     { name: 'id', display: '序号', width: 200 },
 4                     { name: 'name', display: '名称', width: 300 }
 5                 ],
 6             data: { Rows: griddata },
 7             onSelectRow: function (rowdata, rowindex) {
 8                 //行记录 对于数据行
 9                 //行索引 第几行,从0开始
10                 alert(rowdata.name);
11             }
12         }); 
13         grid.bind('SelectRow', function (rowdata, rowindex) {
14             //this 这里的this都是指向grid
15 
16             //行记录 对于数据行
17             //行索引 第几行,从0开始
18             alert(rowdata.name);
19         });

1     <a class="l-button" href="javascript:selectRow(2)">选择行(3)</a>
2     <a class="l-button" href="javascript:getSelectRow()">获取选择</a>

 1 var grid = $("#maingrid").ligerGrid({
 2             columns: [
 3                 { name: 'id', display: '序号', width: 200 },
 4                 { name: 'name', display: '名称', width: 300 }
 5             ]
 6         });
 7 
 8         grid.set({ data: { Rows: griddata} });
 9          
10         function selectRow(index) {
11             grid.select(index);
12         }
13         function getSelectRow() {
14             var rows = grid.getSelecteds();
15             for (var i in rows) {
16                 alert(rows[i].name);
17             }
18         }