首页引入样式文件和js文件：<link href="css/ligerui-all.css" rel="stylesheet" type="text/css" />
<!--jquery脚本-->
<script src="js/jquery-1.9.0.min.js" type="text/javascript"></script>
<!--jquery LigerUI基本脚本-->
<script src="js/base.js" type="text/javascript"></script>
<!--列拖拽脚本-->
<script type="text/javascript" src="js/ligerResizable.js" ></script>
<!--网格脚本-->
<script src="js/ligerGrid.js" type="text/javascript"></script>然后就可以使用liger Grid了。
<div id="maingrid"></div>
<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>
配置列column：
表格显示了多少个列，列宽，列单元格要显示的内容都是由columns属性配置的，下面是column的配置参数：
{
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 },onCheckRow:function(checked,data,rowindex,rowobj){ checked&&$.ligerDialog.alert('选择的是'+data.CustomerID);}
37 //多表头支持
38 columns: null
39 }, 比如表头，我们可以把display直接设置一段html:
1 {
2 display: '<a href="javascript:void(0)">部门</a>', //表头列显示的文本,支持html
3 name: 'name',
4 align: 'left'
5 },或者使用headerRender：
1 //表头内容自定义函数
2 headerRender: function (column) {
3 return "<b>" + column.display + "</b>";
4 },