/**
* 针对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
};
}();
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
