jQuery LigerUI 작업 양식

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

<p id="maingrid"></p> 
<script type="text/javascript"> 
var griddata = [ 
{ id: '01', name: '部门01' }, 
{ id: '02', name: '部门02' }, 
{ id: '03', name: '部门03' }, 
{ id: '04', name: '部门04' }, 
{ id: '05', name: '部门05' }, 
{ id: '06', name: '部门06' }, 
{ id: '07', name: '部门07' } 
]; 
var grid = $("#maingrid").ligerGrid({ 
columns: [ 
{ name: 'id', display: '序号', width: 200 }, 
{ name: 'name', display: '名称', width: 300 } 
], 
data: { Rows: griddata } 
}); 
</script>

{ 
Rows: [ 
{ id: '01', name: '部门01' }, 
{ id: '02', name: '部门02' }, 
{ id: '03', name: '部门03' }, 
{ id: '04', name: '部门04' }, 
{ id: '05', name: '部门05' }, 
{ id: '06', name: '部门06' }, 
{ id: '07', name: '部门07' } 
] 
}

{ 
Rows: [ 
{ id: '01', name: '部门01', children: [ 
{ id: '0101', name: '部门0101' }, 
{ id: '0102', name: '部门0102' }, 
{ id: '0103', name: '部门0103' } 
] 
}, 
{ id: '02', name: '部门02' }, 
{ id: '03', name: '部门03' }, 
{ id: '04', name: '部门04' }, 
{ id: '05', name: '部门05' }, 
{ id: '06', name: '部门06' }, 
{ id: '07', name: '部门07' } 
] 
}

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

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

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

$.ligerDefaults.Grid.formatters['currency'] = function (num, column) { 
//num 当前的值 
//column 列信息 
if (!num) return "$0.00"; 
num = num.toString().replace(/\$|\,/g, ''); 
if (isNaN(num)) 
num = "0.00"; 
sign = (num == (num = Math.abs(num))); 
num = Math.floor(num * 100 + 0.50000000001); 
cents = num % 100; 
num = Math.floor(num / 100).toString(); 
if (cents < 10) 
cents = "0" + cents; 
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) 
num = num.substring(0, num.length - (4 * i + 3)) + &#39;,&#39; + 
num.substring(num.length - (4 * i + 3)); 
return "$" + (((sign) ? &#39;&#39; : &#39;-&#39;) + &#39;&#39; + num + &#39;.&#39; + cents); 
};

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

var grid = $("#maingrid").ligerGrid({ 
columns: [ 
{ name: 'id', display: '序号', width: 100, 
render: function (record, rowindex, value, column) { 
//this 这里指向grid 
//record 行数据 
//rowindex 行索引 
//value 当前的值，对应record[column.name] 
//column 列信息 
return "<a href=&#39;edit.htm?id=" + value + "&#39;>编辑</a>"; 
} 
}, 
{ name: 'id', display: '序号', width: 120, 
render: function (record, rowindex, value, column) { 
return '<input type="button" value="Add"/><input type="button" value="Edit"/><input type="button" value="Delete"/>'; 
} 
}, 
{ name: 'name', display: '名称', width: 300 } 
], 
data: { Rows: griddata } 
});

editor: { type: 'spinner' }

usePager: false

var grid = $("#maingrid").ligerGrid({ 
columns: [ 
{ name: 'id', display: '序号', width: 200 }, 
{ name: 'name', display: '名称', width: 300 } 
], 
data: { Rows: griddata }, 
onSelectRow: function (rowdata, rowindex) { 
//行记录 对于数据行 
//行索引 第几行,从0开始 
alert(rowdata.name); 
} 
}); 
grid.bind('SelectRow', function (rowdata, rowindex) { 
//this 这里的this都是指向grid 
//行记录 对于数据行 
//行索引 第几行,从0开始 
alert(rowdata.name); 
});

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

var grid = $("#maingrid").ligerGrid({ 
columns: [ 
{ name: 'id', display: '序号', width: 200 }, 
{ name: 'name', display: '名称', width: 300 } 
] 
}); 
grid.set({ data: { Rows: griddata} }); 
function selectRow(index) { 
grid.select(index); 
} 
function getSelectRow() { 
var rows = grid.getSelecteds(); 
for (var i in rows) { 
alert(rows[i].name); 
} 
}