//对象级别插件的开发
/* 调用方式
sbxm = $("#SBXM").DynamicTable({tableName:"T_JL_XKZQF_SBXM",tableCH:"申报项目",serial:false,recordId:$("#hidRecordId").val(),items:[
{key:"NO",title:"序号",control:0,width:"28px"},
{key:"ZSZH",title:"型式批准<br/>证书编号",control:0,width:"100px"},
{key:"QNAME",title:"计量器<br/>具名称",control:0,width:"100px"},
{key:"XHGGZQD",title:"型号、规格、准确度",control:4,width:"100px"},
{key:"CPBZDHJMC",title:"产品标准代号及名称",control:4,width:"100px"},
{key:"JDGCGFMCJDH",title:"检定规程/规范名称及代号",control:4,width:"100px"},
{key:"BZ",title:"备注",control:0,width:"100px"}
]});
sbxm.save();
*/
; (function ($, win) {
var DynamicTable = function (form, settings) {
var settings = $.extend({}, DynamicTable.defaults, settings || {});
var that = this;
that.settings = settings;
var table = "<table id='table_"+settings.tableName+"' class='table01' style='width:100%;'></table>";
$(form).append(table);
that.tarId = $("#table_"+settings.tableName+"");
that.index = 1;
that.show(form);
$("#add_" + settings.tableName + "").bind("click", function () {
that.addRow(settings);
});
return that;
};
DynamicTable.defaults = {
tableName: "",
tableCH:"表格",
url: "/TableHandler.ashx",
rows: 3,
serial: true,
recordId:"",
items: [{
key: "",
title: "",
width:"",
headCss:"",
rowCss:"",
control: 0,
data: ""
}]
};
DynamicTable.prototype = {
show: function () {
var that = this;
that.getHead();
var settings = that.settings;
if (settings.rows > 0) {
for (var pos = 0; pos < settings.rows; pos++) {
that.getRow(that.index);
that.index++;
}
}
},
delRow: function (id) {
$(id).remove();
},
addRow: function () {
var that = this;
that.getRow(that.index++);
},
save: function (fn) {
var that = this;
var rows = $(that.tarId)[0].rows;
var tableName = that.settings.tableName;
var items = that.settings.items;
var json = "{\"tableName\":\""+tableName+"\",\"tableData\":[";
var lData = "";
for(var k=2;k<rows.length;k++){
var data = "";
var clear = 0;
for (var pos = 0; pos < items.length; pos++) {
var item = items[pos];
var rowId = rows[k].id.replace(tableName,tableName+"_"+item.key).substring(4);
var text = "";
switch(item.control){
case 0:
case 3:
rowId="#txt_"+rowId;
text = $(rowId).val();
break;
case 1:
rowId="#ddl_"+rowId;
text = $(rowId).val();
break;
case 2:
rowId="#hid_"+rowId;
text = $(rowId).val();
break;
case 4:
rowId="#area_"+rowId;
text = $(rowId).text();
break;
}
if(text == "") clear++;
data+="\""+ item.key+"\":\""+text+"\"";
if(pos!=items.length-1) data+=",";
}
if(clear != items.length){
lData += "{" + data + "},";
// if(k != rows.length-1) lData+= ",";
}
}
if(lData != ""){
json += lData.substring(0,lData.length - 1) + "]}";
$.ajax({
type: "POST",
url: that.settings.url,
data: {TableJson:json,RecordId:that.settings.recordId},
dataType: "text",
success: function(data){
if(fn!=null&&fn!=undefined)
fn(data);
}
});
}
},
getHead: function () {
var that = this;
var rowHtml = "<tr>";
var items = that.settings.items;
rowHtml += "<th colSpan='" + (that.settings.serial ? (items.length + 2) : (items.length + 1)) + "' style='font-weight: bold;'>"+that.settings.tableCH+"</th>";
rowHtml += "</tr><tr>";
if (that.settings.serial) {
rowHtml += "<th style='width:28px;padding-left:1px;padding-right:1px;'>序号</td>";
}
for (var pos = 0, item; item = items[pos]; pos++) {
rowHtml += "<th "+(item.headCss!=undefined?"class='"+item.headCss+"'":"")+" style='text-align:center;width:"+item.width+";padding-left:1px;padding-right:1px;'>" + item.title + "</td>";
}
rowHtml += "<th style='width:30px;padding-left:1px;padding-right:1px;'><a href='javascript:void(0);' id='add_" + that.settings.tableName + "' style='color:blue;'>添加</a></td>";
rowHtml += "</tr>";
$(that.tarId).append(rowHtml);
},
getRow: function (rowId) {
var that = this;
var rowHtml = "<tr id='row_" + that.settings.tableName + "_" + rowId + "'>";
var items = that.settings.items;
if (that.settings.serial) {
rowHtml += "<td style='text-align:center;'>" + rowId + "</td>";
}
for (var pos = 0, item; item = items[pos]; pos++) {
rowHtml += "<td "+(item.rowCss!=undefined?"class='"+item.rowCss+"'":"")+" style='width:"+item.width+";padding-left:1px;padding-right:1px;'>" + that.getControl(that.settings.tableName, item, rowId) + "</td>";
}
rowHtml += "<td style='text-align:center;padding-left:1px;padding-right:1px;'><a href='javascript:void(0);' style='color:blue;' id='del_" + that.settings.tableName + "_" + rowId + "'>删除</a></td>";
rowHtml += "</tr>";
$(that.tarId).append(rowHtml);
$("#del_" + that.settings.tableName + "_" + rowId + "").bind("click", function () {
var id = "#row_"+ that.settings.tableName + "_" + rowId;
that.delRow(id);
});
},
getControl: function (tableName, item, rowId) {
var type = item.control;
var html = "";
var controlId = tableName + "_" + item.key + "_" + rowId;
var data = ((item.data == null ||item.data == undefined ) ? "" : item.data);
switch (type) {
case 0:
html = "<input name="+item.key+" id='txt_" + controlId + "' type='input' value='" + data + "' style='width:96%;'>";
break;
case 1:
html = "<select name="+item.key+" id='ddl_" + controlId + "' style='width:96%;'>";
if (data != null && data != "") {
//html += "<option value=''>---请选择---</<option>";
for (var pos = 0, d; d = data[pos]; pos++) {
html += "<option value='" + d.value + "'>" + d.text + "</<option>";
}
}
html += "</select>";
break;
case 2:
html = "<input name="+item.key+" id='hid_" + controlId + "' type='hidden' value='" + data + "'>";
break;
case 3:
html = "<input name="+item.key+" class='Wdate' οnfοcus='WdatePicker()' readonly='true' id='txt_" + controlId + "' type='input' value='" + data + "' style='width:90px;'>";
break;
case 4:
html = "<textarea name="+item.key+" id='area_" + controlId + "' rows='3' cols='10' value='"+data+"' style='width:96%;' />"
break;
default:
break;
}
return html;
}
};
$.fn.DynamicTable = function (settings) {
return new DynamicTable(this, settings);
};
})(jQuery, window);