ligerUI是基于jquery的一套js UI框架

项目工程中，有些心得和想法，分享给大家

项目中用到的版本为ligerUI 1.2.2，可能后续版本略有差异。

经过项目使用，个人心得，多看API和demo,源代码也需要看看，个人感觉源代码更全，更详细，很有必要看下，有时API不开放的方法，也可以调用，或做一些定制。

ligerUI前后台交互都是通过json来的。

如果对json格式不熟悉，请参考：http://www.json.org/

 $("#queryForm").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate : true, fields: [ { display: "userName", name: "userName", newline: false, type: "text",group: "search", groupicon: $._groupIcon} ] }); $("#demo").ligerGrid({ height:'100%', checkbox: true, columns: [ { display: '用户名', name: 'userName', width: 100 ,editor: { type: 'text'},isSort:false}, { display: '用户类型', name: 'userType', width: 120,isSort:false, render: function (item) { return getValue("userType", item.userType); // getValue js是自己写的js,根据key转义为需要展示的value } } ], pageSize:10 ,rownumbers:true, url: "${your_url}", toolbar: { items: [ { text: 'add', click: addClick, icon: 'add'}, { line: true }, { text: 'modify', click: modifyClick, icon: 'modify' } ] } });

如何获取列表选中的行数 并循环取值：

 var manager = $("#gridId").ligerGetGridManager(); var rows = manager.getSelectedRows(); var userId; $.each(rows, function (i, item) { userId=item.userId; }); 

编辑完表格后，终止编辑，告诉管理器编辑完毕

 var manager = $("#gridId").ligerGetGridManager(); manager.endEdit();

提交表单所有数据

 function (gridId, url, callback) { var manager = $("#" + gridId).ligerGetGridManager(); manager.endEdit(); var params=manager.getData(); params=JSON.stringify(params); $.ajax({ contentType : 'application/json', type: "POST", dataType: "json", url: url, data: params, success: function (data) { if (callback) callback(data); } }); }; 

关于表单中日期格式传到后台格式问题（传到后台时会出现类似 ....(中国标准时间)）

可以经过json转换：比如：

 var form = liger.get("form1"); var params = form.getData(); params=liger.toJSON(params); params = eval("("+params+")");

  后台java 转换类如下：

 SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"); sdf.setTimeZone(TimeZone.getTimeZone("GMT")); sdf.setLenient(false); try { return sdf.parse(source); } catch (ParseException e) { logger.error("",e); }

 //表单中select自动加载url:url对应后台方法返回json数据格式，返回如下{"name":yourName,"value":yourValue}

 $("#publishForm").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate : true, fields: [ { display: "UserList", name: "user", newline: true,type: "select", options :{'url':"${your_url}", valueField : "value" , textField : "name",slide:true}} ], buttons: [ { text: 'submit', width: 60, click:submit}, { text: 'cancel', width: 60, click:cancel} ] }); }); 

    新增form demo（校验等）

 $("#form1").ligerForm({ inputWidth: 170, labelWidth: 90, space: 40, validate : true, // unSetValidateAttr:true, fields: [ { display: "userName", name: "userName", newline: true, type: "text" ,validate:{required:true}}, { display: "userType"/>", name: "userType", newline: true,type: "select", options :{'data':getValue('userType'), valueField : "value" , textField :"name",onSelected:f_onUserTypeChanged},validate:{required:true}}, { display: "relatedUser"/>", name: "relatedUser", newline: true,type: "select", options :{'url':"", valueField : "value" , textField : "name",slide:true},validate:{required:false}}, { display: "description", name: "description", newline: true, type: "textarea", width:350}, { name: "status",type: "hidden"} ], buttons: [ { text: 'save', width: 60, click: save }, { text: 'close>', width: 60, click: close } ] }); }); function f_onUserTypeChanged(value){ var form = liger.get("form1"); if(value==2){ getFormField("form1","2").css("display","none"); form.getEditor("relatedUser").clearContent(); form.getEditor("relatedUser").setUrl("${yourUrl}"); form.getEditor("relatedUser").reload(); } else if(value==1){ getFormField("form1","2").css("display","block"); } }

    获取form的第几个field

 function getFormField(formId,index) { return $("#"+formId+" > div.l-form-container > ul").eq(index); };