LigerUI

该篇记录使用过程中需要注意的细节。

ORM框架使用的是MyBatis。

---

【1】查询列表参数传递

此时对后台mapper.xml要求尽可能使用map(若非表单对象传参，尽可能使用map传参接参)，这样在后续扩展或根据不同列进行排序提供了更大的可能性与稳定性。

e.g : 一定要注意从页面传到后台的参数与sql中使用的参数是否一致(比如页面传sitenumber , sql使用site_number , 肯定抛异常)。

parameterType="hashmap" resultType="hashmap"

---

【2】设置列表某列不参与排序

ligerUI列表列点击是可以进行排序的，但是有些列是你自定义的，对象或sql表中并无该字段，这种情况下，可以设置该列不排序：

-- 设置的为列属性--columns{display:'操作',--显示名字，可以为一段htmlname:'operation',id:'operation',align:'middle',-- 单元格内容显示位置width:'5%',--宽度占据父容器的百分比type:'string',--内容类型，string,int,date...isSort:false, -- 定义不排序 ！！！render:function(row){ -- 单元格定义函数      return f_html(row);}},

---

【3】获取表格列数据-后台返回形式

ligerGrid接收数据形式为 {Rows：[……],Total:}—json对象形式。

• 这里使用的是fastJSON。

String jsonString = "{\"Rows\":[],\"Total\":0}";List<Map<String,Object>> list; // 表格列数据内容Long count;// 表格列行数jsonString = String.format("{\"Rows\":%s,\"Total\":%d}", JSON.toJSONString(list,count);//返回的数据格式-------如果数据有日期，需进行日期格式化处理：--------jsonString = String.format("{\"Rows\":%s,\"Total\":%d}", JSON.toJSONStringWithDateFormat(list,"yyyy-MM-dd HH:mm:ss"),count);//如果你返回的是list<User> users,且user里面有日期。那么可以使用下面形式进行日期格式化:JSON.DEFFAULT_DATE_FORMAT = "yyyy-MM-dd HH:mm:ss";String str = JSON.toJSONString(users,SerializerFeature.WriteDateUseDateFormat);

或者如下形式 , 比上面形式更简洁：

-- 使用fastJSON;ist<Map<String, Object>> listResult;jsonObject.put("Rows", listResult);jsonObject.put("Total", listResult.size());return jsonObject.toJSONString();//同样的方式，如果有日期需要转换，参考下面方法:String dateFormat="yyyy-MM-dd HH:mm:ss";return JSON.toJSONStringWithDateFormat(jsonObject, dateFormat, SerializerFeature.WriteDateUseDateFormat);

---

【4】表格属性介绍

表格数据有两个属性,一个是Rows，一个是Total。其中Rows是一个数据数组，Total是记录的总数。

故如【3】所示，后台查询数据返回json形式String jsonString = "{\"Rows\":[],\"Total\":0}";。

需要注意的是，配置表格列columns时并不一定要配置记录中的所有属性。只需要配置需要显示的列即可，但是记录中的所有属性值，都可以通过row对象获取(举例：没有显示出来name列，但是可以通过row.name获取值)。

也就是说，row包括了你返回的所有的属性以及自身属性！！

常见表格使用属性如下：

表格列显示--columns var data = [          {display:'名字',name:'name',id:'name',align:'left',width:'60%',type:'string'},          {display:'密码',name:'pwd',id:'pwd',align:'middle',width:'40%',type:'int'}        ];-- 获取表格数据;    $("#listgrid").ligerGrid({                           columns: data,//获取列                parms: [{ name: "name",value: "tom"}],//发送的查询参数                showTitle: false,//是否显示表格标题                url: url,//发往服务器的链接                dataAction: 'server',//从服务获取数据                //data:myData,//本地数据，注意格式;                //dataAction:'local',//本地数据需要设置为local                sortName: 'id',//排序依据                sortOrder:'desc',//排序升降                pageSize: 20,//每页记录数                height:'100%',                width: '100%',                usePager:true,//是否使用分页                pageSizeOptions: [20,30,50,100],//每页记录数可供选择的参数                onSelectRow: function (row, index, data){                    //row对象中封装了，被选中列的数据;index为行号，如r1001;data为HTMLTableRowElement。                    id = row.id;                },//选中某行触发函数                onDblClickRow : function (row, index, data)                {                }, //双击某行触发函数                detail:{ onShowDetail: showDetailFun,height:190 }//明细表格，需要自定义showDetailFun函数            });

---

当需要动态改变查询参数进行再次数据加载时：

    function f_query(){            var manager = $("#listgrid").ligerGetGridManager();            manager.setOptions({                 parms: [{name:"userCode",value:userCodeVal}]            });            //将会覆盖设置表格对象属性时的parms属性            //查询时，设置为第一页！！            manager.changePage("first");             //重新发起ajax请求，加载数据            manager.loadData(true);         }

这里需要说明一下：

如果重新查询时，manager未设置params，那么仍旧使用设置表格对象时设置的参数，如parms: [{ name: "name",value: "tom"}]

如果重新查询时，设置了params，那么将不会使用设置表格对象时设置的参数。即，此时parms变为parms:[{name:"userCode",value:userCodeVal}];

但是如下四个参数不会丢弃(如果设置了分页和排序) :

page:1pagesize:20sortname:create_timesortorder:desc

---

【5】列属性

示例一个列可能会有的属性与操作：

-- column的属性与操作;{    display: '序号',         //表头列显示的文本,支持html    //表头内容自定义函数    headerRender: function (column) {        return "<b>" + column.display + "</b>";    },    name: 'id',     //单元格映射的行数据属性     align: 'center',  //单元格内容对齐方式:left/center/right        hide: false,             //是否隐藏    type: 'string',          //类型,string、int、float、date    width: 100,              //列的宽度    minWidth: 50,            //列的最小宽度    isSort: true,       //是否允许此列排序,默认为允许排序     isAllowHide: true,     //是否允许隐藏,如果允许，将会出现在【显示/隐藏列右键菜单】    //自定义单元格渲染器。如果没有配置render，那么单元格显示的内容将由name确定。    render : function (row) {        //row    当前的行记录数据        return row.column;  //返回此单元格显示的HTML内容(一般根据row的列内容进行组织)    },    //列汇总    totalSummary: {        align: 'center',   //汇总单元格内容对齐方式:left/center/right         type: 'count',     //汇总类型sum,max,min,avg ,count。可以同时多种类型        render: function (e) {  //汇总渲染器，返回html加载到单元格            //e 汇总Object(包括sum,max,min,avg,count)             return "<div>总数：" + e.count + "</div>";        }    },    //单元格编辑器    editor: {        type: 'text'    },    //多表头支持    columns: null},

---

自定义表头(注意不是内容单元格)时，除了使用headerRender函数外，还可以把display直接设置为一段html：

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

---

自定义单元格示例如下：

{    display: '姓名',     name: 'name',    align: 'left',    render:function(row){        if(row.name == 'Janus'){            return "好人";        }else{            return "坏人";        }    }},

单元格内容的显示规则：

1. 如果配置了render，使用render;2. 如果column的type参数扩展了对应的格式化器，那么使用格式化器进行渲染。比如定义了货币格式的格式化器;3. 最后才是使用默认显示方式。

---

【7】获取选中行对象的两种形式

有两种获取选中表格行对象的形式：

① var row = manager.getSelectedRow();

这种方式获取的是该行记录的json对象(可以直接使用data.key的形式获取值)，包括你放进去的属性和列自身的属性。

如下图所示：

此时获取选中行的数据，比如id : id = row.id;

如果你选中了多行，那么该方法只会获取你第一次选择的row对象。

---

② var row = manager.getCheckedRows();

这种方式获取的是该行记录的json集合对象(可以使用data[0].key的形式获取第一行的属性值)，包括你放进去的属性和列自身的属性。

如下图所示：

此时获取选中行的数据，比如id : id = row[0].id。

需要注意的是，如果使用了该方法获取row对象，那么即使只选中了一行，获取id也需要使用id = row[0].id形式。

如果表格使用了复选框选中了多行，那么indexID = row[index].id。

---

【8】复选框的选中状态初始化

   <script type="text/javascript">        $(function () {        window['g']=            $("#maingrid4").ligerGrid({                checkbox: true,//使用复选框                columns: [                { display: '主键', name: 'CustomerID', align: 'left', width: 120 },                { display: '公司名', name: 'CompanyName', minWidth: 60 },                { display: '联系名', name: 'ContactName', width: 50,align:'left' },                 { display: '联系名', name: 'ContactName', minWidth: 140 },                { display: '联系名', name: 'ContactName', minWidth: 140 },                 { display: '联系名', name: 'ContactName', minWidth: 140 },                { display: '联系名', name: 'ContactName', minWidth: 140 },                { display: '城市', name: 'City' }                ],                 pageSize:30,                data: CustomersData,                  width: '100%', height: '100%',                isChecked: f_isChecked//判断复选框的选中状态            });            $("#pageloading").hide();        });        //判断函数(可自定义)        function f_isChecked(rowdata)        {            if (rowdata.CustomerID.indexOf('AN') == 0)                 return true;            return false;        }

返回的数据缩影如下：

var CustomersData = {Rows:[{"CustomerID":"GODOS","CompanyName":"Godos Cocina Típica","ContactName":"José Pedro Freyre"    ,"ContactTitle":"Sales Manager","Address":"C/ Romero, 33","City":"Sevilla","Region":null,"PostalCode":"41101",    "Country":"Spain","Phone":"(95) 555 82 82","Fax":null}],Total:1};