jQuery EasyUI table表单数据绑定与数据交互

/**
 * 针对table进行数据绑定，绑定方式
 * 
table的定义 参数的传递 data-value
data-value:  id为需绑定数据的编号  若需要跳转界面 url:界面路径  location:界面覆盖位置   若需要checkbox则添加check标签 若有xh标签则添加序号显示
formatter用于替换显示值
styleName用于绑定样式这里是class的样式 有的列，如下载需要绑定一个图片，此时可以利用样式完成
text为绑定的值  有的列需要绑定固定的值，比如“详情”
<table id="TCustomer" class="TCustomer" cellspacing="0">
    <thead>
        <tr>
        	<th style="width:20px" data-value={'xh':true}></th>
        	<th style="width:40px" data-value="{'control':'checkbox'}">
        		<input type="checkbox"/>
        	</th>
            <th data-value="{'id':'company_name','url':'../iCore.Mmp.Pt.Web.Oms/CustomerInformation/CustomerDetails.html','location':'.TheCustomer','clickEvent':'TheCustomer.clickShow(this)'}">企业名称</th>
            <th data-value="{'id':'corporation_man','display':'none'}">法人代表</th>
            <th data-value="{'id':'corporation_man','formatter':[{'idField':'4','valueField':'状态2'},{'idField':'1','valueField':'状态1'}]}">法人代表</th>    
        	<th data-value="{'styleName':'tbdownload','text':'测试','clickEvent':'tbfile.downLoad(this)'}" style="width: 40px;text-align:left;">下载</th>	        
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
 
   var tbColumn = new Array();
   $("#TCustomer > thead > tr > th").each(function(){
   		tbColumn.push(eval("("+$(this).attr("data-value")+")"));
   });
   
   ①非分页方式
   //table id:TCustomer    table column:tbColumn  绑定的数据:datas
   CreateTb.WriteTb("#TCustomer",tbColumn,datas);  
   
   ②分页方式
   CreateTb.WriteTb("#TCustomer",tbColumn,datas,"#customerpagination");     
   
   数据获取方式
   CreateTb.getClickRowDb("#TCustomer");
   
   若存在覆盖页则父界面的数据传递给子界面的时候会写到 parantParam 参数中
   具体可看Home.js中的PageJump函数
    function PageJump(Url,MId,params){
    	if(Url) {
            $.ajax({
                url: Url,
                type: "post",
                dataType: 'html',
                success: function (data) {
                	var paramDb="";
                	if(params){
                		paramDb="<script>var parantParam="+JSON.stringify(params)+"; </script>";
                    }
                	if(MId){
                    	$(MId).html(paramDb+data);
                    }
                    else{
                        $(".section-right").html(paramDb+data);
                    }
                }
            });
        }
    }
    
   比如下面 param 其实是点击的那个html节点
	function clickShow(param){
		HomePage.PageJump($(param).attr("data-url"), $(param).attr("data-location"),CreateTb.getRowDb("#TCustomer",param));
	}
	在子界面中用 parantParam即可获取到父界面传递过来的参数
 * */
var CreateTb=function(){
	function WriteTb(tbId,tbColumns,data,PgId){
		var dbCount=0;
	    var isRows=false;
	    var dbTotal=0;
		if(data){
	        if(data.rows){
	            dbCount=data.rows.length;
	            isRows=true;
	            if(data.total){
	            	dbTotal=data.total;
	            }
	        }else{
	            dbCount=data.length;
	        }
	    }
		//可以不在界面构造，tbColumns传一个null过来即可
		var tbColumn = new Array();
		if(!tbColumns){
			$(tbId+" > thead > tr > th").each(function(){
		   		tbColumn.push(eval("("+$(this).attr("data-value")+")"));
		    });
		}else{
			tbColumn=tbColumns;
		}
		var htmlStr="";
	    for(var j=0;j<dbCount;j++) {//循环数据
	        htmlStr+="<tr>";
	        for (var i = 0; i < tbColumn.length; i++) {//循环头部
	        	if(tbColumn[i].control){
	        		//写入checkbox
	        		htmlStr+="<td><input class='checked' type='"+tbColumn[i].control+"'/></td>\n";
	        	}else if(tbColumn[i].xh){
	        		//写入序号列
	        		htmlStr+="<td>"+(j+1)+"</td>\n";
	        	}else{
	        		//写入值
	        		var dbtxt="";
	        		//用于点击跳转
	        		if(isRows){
	        			if(data.rows[j][tbColumn[i].id]!=undefined&&data.rows[j][tbColumn[i].id]!=null){
		        			//'formatter':[{'idField':'0','valueField':'状态0'},{'idField':'1','valueField':'状态1'}]
		        			var formatter=tbColumn[i].formatter;
		        			if(formatter){
			        			for(var k=0;k<formatter.length;k++){
			        				if(data.rows[j][tbColumn[i].id]==formatter[k].idField){
										dbtxt=formatter[k].valueField;
										break;
									}
								}
		        			}else{
		        				dbtxt=data.rows[j][tbColumn[i].id];
		        			}
	        			}
		        		//用于显示隐藏，默认显示
	        			if(tbColumn[i].display){
	        				htmlStr+="<td style='display:"+tbColumn[i].display+"'>";
	        			}else{
	        				htmlStr+="<td>";
	        			}
	        			if(tbColumn[i].clickEvent||tbColumn[i].clickDivEvent||tbColumn[i].url||tbColumn[i].location||tbColumn[i].styleName||tbColumn[i].text){
	        				//HomePage.PageJump($(this).attr(\"data-url\"),\""+tbColumn[i].location+"\",CreateTb.getRowDb(\""+tbId+"\",this))
			                //从rows中获取值匹配则构造写入，否则构造空
		        			//必须有绑定事件才能跳转
		        			if(tbColumn[i].clickDivEvent){
		        				htmlStr+="<div style='width:100%' onclick='"+tbColumn[i].clickDivEvent+"' ";
		        			}else{
		        				htmlStr+="<span ";
		        			}
		        			
	        				if(tbColumn[i].clickEvent||tbColumn[i].clickDivEvent){
	        					htmlStr+=" onclick='"+tbColumn[i].clickEvent+"' ";
	        				}
	        				if(tbColumn[i].url){
	        					htmlStr+=" data-url='"+tbColumn[i].url+"' ";
	        				}
	        				if(tbColumn[i].location){
	        					htmlStr+=" data-location='"+tbColumn[i].location+"' ";
	        				}
	        				
	        				if(tbColumn[i].styleName){
	        					htmlStr+=" class='"+tbColumn[i].styleName+"'";
	        				}
	        				if(tbColumn[i].text){
	        					dbtxt+=tbColumn[i].text;
	        				}
	        				if(tbColumn[i].clickDivEvent){
	        					htmlStr+=">"+(dbtxt?dbtxt:0)+"</div>";
		        			}else{
		        				htmlStr+=">"+dbtxt+"</span>";
		        			}
	        				
	        			}else{
	        				htmlStr+=dbtxt;
	        			}
	        			htmlStr+="</td>\n";
		            }else{
		            	if(data[j][tbColumn[i].id]!=undefined&&data[j][tbColumn[i].id]!=null){
		        			//'formatter':[{'idField':'0','valueField':'状态0'},{'idField':'1','valueField':'状态1'}]
		        			var formatter=tbColumn[i].formatter;
		        			if(formatter){
			        			for(var k=0;k<formatter.length;k++){
			        				if(data[j][tbColumn[i].id]==formatter[k].idField){
										dbtxt=formatter[k].valueField;
										break;
									}
								}
		        			}else{
		        				dbtxt=data[j][tbColumn[i].id];
		        			}
	        			}
		        		//用于显示隐藏，默认显示
	        			if(tbColumn[i].display){
	        				htmlStr+="<td style='display:"+tbColumn[i].display+"'>";
	        			}else{
	        				htmlStr+="<td>";
	        			}
	        			if(tbColumn[i].clickEvent||tbColumn[i].clickDivEvent||tbColumn[i].url||tbColumn[i].location||tbColumn[i].styleName||tbColumn[i].text){
	        				if(tbColumn[i].clickDivEvent){
		        				htmlStr+="<div style='width:100%' onclick='"+tbColumn[i].clickDivEvent+"' ";
		        			}else{
		        				htmlStr+="<span ";
		        			}
	        				
	        				if(tbColumn[i].clickEvent){
	        					htmlStr+=" onclick='"+tbColumn[i].clickEvent+"' ";
	        				}
	        				if(tbColumn[i].url){
	        					htmlStr+=" data-url='"+tbColumn[i].url+"' ";
	        				}
	        				if(tbColumn[i].location){
	        					htmlStr+=" data-location='"+tbColumn[i].location+"' ";
	        				}
	        				
	        				if(tbColumn[i].styleName){
	        					htmlStr+=" class='"+tbColumn[i].styleName+"'";
	        				}
	        				if(tbColumn[i].text){
	        					dbtxt+=tbColumn[i].text;
	        				}
	        				
	        				if(tbColumn[i].clickDivEvent){
	        					//htmlStr+=">"+(dbtxt?dbtxt:"0")+"</div>";
	        					htmlStr+=">"+(dbtxt?dbtxt:0)+"</div>";
		        			}else{
		        				htmlStr+=">"+dbtxt+"</span>";
		        			}
	        			}else{
	        				htmlStr+=dbtxt;
	        			}
	        			
	        			htmlStr+="</td>\n";
		            }
	        	}
	        }
	        htmlStr+="</tr>\n";
	    }
	    $(tbId).children("tbody").html(htmlStr);
	    
	    if(PgId){
	    	$(PgId).pagination('refresh',{	// 改变选项并刷新分页栏信息
				total: dbTotal
			});
	    }
	    
	    tbCheck(tbId)
	}
	function tbCheck(tbId){
		$(tbId+" thead input[type='checkbox']").click(function(){
			if($(this).prop("checked")){
				$(tbId+" tbody input[type='checkbox']").prop({"checked":true});	
			}else{
				$(tbId+" tbody input[type='checkbox']").prop({"checked":false});
			}
		});
		
		$(tbId+" tbody tr").on("click",function(){
	    	$(tbId+" tbody tr").css({"background-color":"#FFF"});
	    	$(tbId+" tbody tr").removeAttr("data-check");
	    	$(this).css({"background-color":"#E9F7F6"});
	    	$(this).attr("data-check","checked");
	    	$(tbId+" tbody input[type='checkbox']").prop({"checked":false});
	    	$(this).children("td").each(function(){
	    		var ck = $(this).children("input[type='checkbox']");
	    		if(ck){
	    			ck.prop({"checked":true});
	    		}
		    });
	    });
	}
	//获取点击行数据
	function getClickRowDb(tbId){
		var dbColumn=[];
		$(tbId+" thead th").each(function(){
		    var dbId=eval("("+$(this).attr("data-value")+")");
		    if(dbId&&dbId.id){
		    	if(dbId.id){
		    		dbColumn.push(dbId);
		    	}else{
		    		dbColumn.push("null");
		    	}
		    }else{
		    	dbColumn.push("null");
		    }
		});
		var rowDbStr="";
		var i=0;
		$(tbId+" tbody tr[data-check='checked']").children("td").each(function(db){
			if(dbColumn[i]!="null"){
				if(dbColumn[i].formatter){
					for(var k=0;k<dbColumn[i].formatter.length;k++){
						if($(this).text()==dbColumn[i].formatter[k].valueField){
	    					rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
							break;
						}
					}
				}else{
					rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
				}
			}
			i++;
		});
		if(rowDbStr.length>0){
			rowDbStr=rowDbStr.substring(0, rowDbStr.length-1)+"}";
			rowDbStr="{"+rowDbStr;
			return JSON.parse(rowDbStr);
		}else{
			return [];
		}
	}
	//获取某一行的数据 indexNum为第N行
	function getIndexRowDb(tbId,indexNum){
		var dbColumn=[];
		var rowDbStr="";
		var i=0;
		$(tbId+" thead th").each(function(){
		    var dbId=eval("("+$(this).attr("data-value")+")");
		    
		    if(dbId&&dbId.id){
		    	if(dbId.id){
		    		dbColumn.push(dbId);
		    	}else{
		    		dbColumn.push("null");
		    	}
		    }else{
		    	dbColumn.push("null");
		    }
		    
		});
		
		$(tbId+" tbody tr:eq("+indexNum+") >td").each(function(){
			if(dbColumn[i]!="null"){
				if(dbColumn[i].formatter){
					for(var k=0;k<dbColumn[i].formatter.length;k++){
						if($(this).text()==dbColumn[i].formatter[k].valueField){
	    					rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
							break;
						}
					}
				}else{
					//针对带斜杠的数据如路径
					rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
				}
			}
			i++;
		});
		
		if(rowDbStr.length>0){
			rowDbStr=rowDbStr.substring(0, rowDbStr.length-1)+"}";
			rowDbStr="{"+rowDbStr;
			return JSON.parse(rowDbStr);
		}else{
			return [];
		}
	}
	
	function getRowDb(tbId,param){
		var dbColumn=[];
		
		$(tbId+" thead th").each(function(){
		    var dbId=eval("("+$(this).attr("data-value")+")");
		    
		    if(dbId&&dbId.id){
		    	if(dbId.id){
		    		dbColumn.push(dbId);
		    	}else{
		    		dbColumn.push("null");
		    	}
		    }else{
		    	dbColumn.push("null");
		    }
		    
		});
		
		var i=0;
		var rowDbStr="";
		//td下有span链接情况 
		if($(param).parent().parent().children("td")){
			$(param).parent().parent().children("td").each(function(){
				if(dbColumn[i]!="null"){
					if(dbColumn[i].formatter){
						for(var k=0;k<dbColumn[i].formatter.length;k++){
	        				if($(this).text()==dbColumn[i].formatter[k].valueField){	
								rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
								break;
							}
						}
					}else{
						rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
					}
				}
				i++;
			});
		}else if($(param).parent().children("td")){//td下直接点击数据
			$(param).parent().children("td").each(function(){
				var bflag=false;
				if(dbColumn[i]!="null"){
					if(dbColumn[i].formatter){
						for(var k=0;k<formatter.length;k++){
	        				if($(this).text()==dbColumn[i].formatter[k].valueField){
	        					rowDbStr+="\""+dbColumn[i].id+"\":\""+dbColumn[i].formatter[k].idField+"\","
								break;
							}
						}
					}else{
						rowDbStr+="\""+dbColumn[i].id+"\":\""+$(this).text().replace(/(\r\n)|(\n)/g,"\\n\\r")+"\","
					}
				}
				i++;
			});
		}
		
		if(rowDbStr.length>0){
			rowDbStr=rowDbStr.substring(0, rowDbStr.length-1)+"}";
			rowDbStr="{"+rowDbStr;
			return JSON.parse(rowDbStr);
		}else{
			return [];
		}
	}
	
	return { 
		WriteTb: WriteTb,
		tbCheck:tbCheck,
		getClickRowDb:getClickRowDb,
		getRowDb:getRowDb,
		getIndexRowDb:getIndexRowDb
	};
}();