ligerUI总结

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