西安h5网站建设百度统计数据分析

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);};