//页面初始化 加载 JS函数
//调整 浏览器 表格的显示宽度 以及 调用 锁定 表头和列 的JS函数。
function cloneTableHeader_Width(TableID) {
//document.body.clientWidth获得客户区域(浏览器窗口,不包括菜单栏和状态栏,就是内容窗口)的宽度 - 35像素的滚动条宽度。
var myTable_Width = (document.body.clientWidth - 35);
//alert(myTable_Width);//测试屏幕宽度
if ((document.body.clientWidth - 35) < 855) {
myTable_Width = 855; //宽度
}
FixTable2(TableID, 2, myTable_Width, 400);
}
function FixTable2(TableID, FixColumnNumber, width, height) {
/// <summary>
/// 锁定表头和列
/// <para> http://blog.csdn.net/SongYanJun2011 </para>
/// </summary>
/// <param name="TableID" type="String">
/// 要锁定的Table的ID
/// </param>
/// <param name="FixColumnNumber" type="Number">
/// 要锁定列的个数
/// </param>
/// <param name="width" type="Number">
/// 显示的宽度
/// </param>
/// <param name="height" type="Number">
/// 显示的高度
/// </param>
if ($("#" + TableID + "_tableLayout").length != 0) {
$("#" + TableID + "_tableLayout").before($("#" + TableID));
$("#" + TableID + "_tableLayout").empty();
}
else {
$("#" + TableID).after("<div id='" + TableID + "_tableLayout' style='overflow:hidden;height:" + height + "px; width:" + width + "px;'></div>");
}
$('<div id="' + TableID + '_tableFix"></div>'
+ '<div id="' + TableID + '_tableHead"></div>'
+ '<div id="' + TableID + '_tableColumn"></div>'
+ '<div id="' + TableID + '_tableData" class="scroll"></div>').appendTo("#" + TableID + "_tableLayout");
var oldtable = $("#" + TableID);
var tableFixClone = oldtable.clone(true);
tableFixClone.attr("id", TableID + "_tableFixClone");
$("#" + TableID + "_tableFix").append(tableFixClone);
var tableHeadClone = oldtable.clone(true);
tableHeadClone.attr("id", TableID + "_tableHeadClone");
$("#" + TableID + "_tableHead").append(tableHeadClone);
var tableColumnClone = oldtable.clone(true);
tableColumnClone.attr("id", TableID + "_tableColumnClone");
$("#" + TableID + "_tableColumn").append(tableColumnClone);
$("#" + TableID + "_tableData").append(oldtable);
$("#" + TableID + "_tableLayout table").each(function () {
$(this).css("margin", "0");
});
var HeadHeight = $("#" + TableID + "_tableHead thead").height();
HeadHeight += 2;
$("#" + TableID + "_tableHead").css("height", HeadHeight);
$("#" + TableID + "_tableFix").css("height", HeadHeight);
var ColumnsWidth = 0;
var ColumnsNumber = 0;
$("#" + TableID + "_tableColumn tr:last td:lt(" + FixColumnNumber + ")").each(function () {
ColumnsWidth += $(this).outerWidth(true);
ColumnsNumber++;
});
ColumnsWidth += 2;
if ($.browser.msie) {
switch ($.browser.version) {
case "7.0":
if (ColumnsNumber >= 3) ColumnsWidth--;
break;
case "8.0":
if (ColumnsNumber >= 2) ColumnsWidth--;
break;
}
}
$("#" + TableID + "_tableColumn").css("width", ColumnsWidth);
$("#" + TableID + "_tableFix").css("width", ColumnsWidth);
$("#" + TableID + "_tableData").scroll(function () {
$("#" + TableID + "_tableHead").scrollLeft($("#" + TableID + "_tableData").scrollLeft());
$("#" + TableID + "_tableColumn").scrollTop($("#" + TableID + "_tableData").scrollTop());
});
$("#" + TableID + "_tableFix").css({ "overflow": "hidden", "position": "relative", "z-index": "50", "background-color": "Silver" });
$("#" + TableID + "_tableHead").css({ "overflow": "hidden", "width": width - 17, "position": "relative", "z-index": "45", "background-color": "Silver" });
$("#" + TableID + "_tableColumn").css({ "overflow": "hidden", "height": height - 17, "position": "relative", "z-index": "40", "background-color": "Silver" });
$("#" + TableID + "_tableData").css({ "overflow": "scroll", "width": width, "height": height, "position": "relative", "z-index": "35" });
if ($("#" + TableID + "_tableHead").width() > $("#" + TableID + "_tableFix table").width()) {
$("#" + TableID + "_tableHead").css("width", $("#" + TableID + "_tableFix table").width());
$("#" + TableID + "_tableData").css("width", $("#" + TableID + "_tableFix table").width() + 17);
}
if ($("#" + TableID + "_tableColumn").height() > $("#" + TableID + "_tableColumn table").height()) {
$("#" + TableID + "_tableColumn").css("height", $("#" + TableID + "_tableColumn table").height());
$("#" + TableID + "_tableData").css("height", $("#" + TableID + "_tableColumn table").height() + 17);
}
$("#" + TableID + "_tableFix").offset($("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableHead").offset($("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableColumn").offset($("#" + TableID + "_tableLayout").offset());
$("#" + TableID + "_tableData").offset($("#" + TableID + "_tableLayout").offset());
}
异步获得数据List<model>或者datatable,拼成html的table
var arryTxtAlign = "";
var param; //参数对象
var th1 = "";
var th2 = "";
var trList1 = ""; //固定列
var trList2 = ""; //不固定的列
FixTable = function () {
var _this = this;
$("#" + param.DivID).append('<img src="../../Content/Images/loading.gif" style="position:absolute; left:400px; top:200px;">');
_this.GetTable = function () {
$.ajax({
type: "get",
url: param.Url,
data: param.Where,
contentType: "application/json; charset=utf-8", //WebService 会返回Json类型 charset=utf-8
dataType: "json",
success: function (tbObj, textStatus) {
if (tbObj == undefined || tbObj.length == 0) {
$("#" + param.DivID).html('');
return false;
}
else {
param.Model = tbObj;
Success();
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
$("#" + param.DivID).html('');
alert("没有数据!"); // the options for this ajax request
}
});
};
Success = function () {
if (param.thTitle == "")
getColName();
var tableCss = param.tbClass == null ? 'mainTable' : param.tbClass;
var th = GetHead();
var tbody = SetRow(); //普通列
var table = "<table id='t_fix' border='1' cellspacing='0' cellpadding='0' class='" + tableCss + " transparent_class'>" + th + tbody + "</table>";
$("#" + param.DivID).html(table);
cloneTableHeader_Width("t_fix");
}
getColName = function () {
var arry = new Array();
i = 1;
arry[0] = "序号";
if (param.Model[0] == undefined)
return false;
$.each(param.Model[0], function (colName, thValue) {
arry[i] = colName;
i = i + 1;
});
param.thTitle = arry;
}
GetHead = function () {
var tr = "<thead><tr>{0}</tr></thead>";
var title = "";
var css = "";
var txt = "";
var isSort = "0";
var tdIndex = -1; //实际的行号
//var orderby = "{0}:{1}"; //i,name
for (var tdNum = 0; tdNum < param.thTitle.length; tdNum++) {
colName = param.thTitle[tdNum].Value;
colName = colName == undefined ? param.thTitle[tdNum] : colName;
//-----------------内容左右中对齐
if (param.TextAlign[tdNum] != null)
arryTxtAlign += ";" + param.TextAlign[tdNum];
else if (colName.toLowerCase().indexOf('id') >= 0 || colName.toLowerCase().indexOf('代码') >= 0)//默认对齐
arryTxtAlign += ";" + "left";
else
arryTxtAlign += ";"
if (param.HasHide[tdNum] != null && param.HasHide[tdNum] == "hide")
continue;
tdIndex += 1;
title += getThOne(tdNum, colName);
//-------------字段排序
// $("#hidColName").val($("#hidColName").val() + "," + orderby.format(tdNum, colName));
}
var head = tr.format(title);
return head;
};
getThOne = function (tdNum, colName) {
var thText = "<a href='#' οnclick='SetSort(\"{0}\");' title='{0}'>{0}</a>";
var sort = param.sort + ",";
if (colName != "序号")//有定义
{
thText = thText.format(colName);
}
else
thText = colName; //需要列明访问td值
thHtml = "<th scope='col' class='{0}'> {1} </th>".format("th" + tdNum + 1, thText);
return thHtml;
};
//得到普通行
SetRow = function () {
var trHTML = "<tr class='{0}'>{1}</tr>";
var tbody = "";
$.each(param.Model, function (trNum, obj) {
var id = 0;
var tr = "";
for (var tdNum = 0; tdNum < param.thTitle.length; tdNum++) {
var td = "";
var colName = param.thTitle[tdNum].Value;
colName = colName == undefined ? param.thTitle[tdNum] : colName;
var tdValue = "没这个字段";
var key = colName;
if (obj.hasOwnProperty(key))
tdValue = obj[key];
if (param.HasHide[tdNum] != null && param.HasHide[tdNum] == "hide")
continue;
if (tdNum == 0) {
td = SetRowOne(tdNum, "序号", trNum + 1);
id = tdValue;
}
else
td = SetRowOne(tdNum, colName, tdValue);
tr += td;
}
tbody += trHTML.format(trNum % 2 == 0 ? "trEven" : "trOdd", tr);
});
return tbody;
}
//设置单元格
SetRowOne = function (tdNum, colName, tdText) {
tdHtml = "<td class='{0}'style='text-align:{1}' > {2} </td>"
.format("td" + tdNum//tdNum % 2 == 0 ? "tdEven" : "tdOdd"//偶奇数列样式名
, GetTextAlign(colName, tdNum, arryTxtAlign)//左右对齐
, tdText == "" && tdText != 0 ? "--" : GetText(tdNum, tdText, colName));
return tdHtml;
}
function GetTextAlign(txt, i, strTextAlign) {
var list = strTextAlign.split(";");
re = /^(\d{4})-(\d{2})-(\d{2})$/g;
if (list[i + 1] != "")
return list[i + 1];
if (!isNaN(txt))
return "right";
else if (re.test(txt) || txt == '--')//判断日期格式符合YYYY-MM-DD
return "center";
else
return "left";
}
function GetText(tdNum, txt, colName) {
if (checkNull(txt))
return "";
if (param.Enum[tdNum] != null) {
var Enum = TrimAll(param.Enum[tdNum].toString())
var iStart = Enum.indexOf(txt + "=") + (txt + "=").length - 1;
var iEnd = Enum.indexOf(',', iStart);
if (iEnd == -1) iEnd = Enum.length + 1;
txt = Enum.substring(iStart + 1, iEnd);
return txt;
}
else {
var checkName = "序号,id,所属机构";
if (checkName.indexOf(colName.toLowerCase()) < 0
&& !isNaN(txt)
&& colName.toLowerCase().indexOf('代码') < 0
&& colName.toLowerCase().indexOf('内码') < 0
&& colName.toLowerCase().indexOf('日期') < 0)
return fmoney(txt, 2);
else
return txt;
}
}
}
FixTable.GetHead = function (thTitle) {
var tr = "<div class='t_box'><table class='mainTable2' width='100%'><tr style='background-color:#54A545;'>{0}</tr></table></div>";
var title = "";
var css = "";
var txt = "";
var isSort = "0";
var tdIndex = -1; //实际的行号
var orderby = "{0}:{1}"; //i,name
for (var i = 0; i < thTitle.length; i++) {
colName = thTitle[i].Value;
colName = (i == 0 ? "序号" : colName);
tdIndex += 1;
title += thHtml = "<th scope='col' class='{0}' style=' white-space: nowrap;'>{1}</th>".format("th" + i, colName); ;
}
var head = tr.format(title);
return head;
};
FixTable.BindDT = function (data) {
//--初始化
arryTxtAlign = "";
th1 = "";
th2 = "";
trList1 = ""; //固定列
trList2 = ""; //不固定的列
///
param = new Array();
param.Model = null; //list<model>
param.Url = data[0]; ; //list<model>
param.Where = data[1]; ; //list<model>
param.DivID = data[2]; // 表显示的地方k
param.tbClass = data[3]; //主表样式
param.thTitle = data[4]; //.replace(data[3].substring(0, data[3].indexOf(',')), "序号"); //表头
param.colEvent = data[5]; //表头事件,如排序
param.HasHide = data[6]; //隐藏的列
param.TextAlign = data[7]; //每个列的内容的左右对其
param.Enum = data[8]; //{ "0": "0=总账,1=分账"}//列的枚举,如第1列“0”代表“正常”
param.FixColNum = data[9];
param.EditURl = data[10]; //编辑按钮事件
param.Deleteurl = data[11]; //删除按钮事件
var ajax = new FixTable();
ajax.GetTable(param); //调用ajax异步调用方法
}
function Delete(id, obj) {
$.post(param.Deleteurl == null ? 'Delete' : param.Deleteurl, { "id": id }, function (tbObj) {
alert("删除成功");
$(obj).parent().parent().remove();
});
}
//排序
function SetSort(colName) {
if (param.Where.sort == undefined || param.Where.sort == "") {
param.Where.sort = "[{0}]:{1}".format(colName, "desc");
where.sort = "[{0}]:{1}".format(colName, "desc");
}
else {
listSort = param.Where.sort.split(':');
param.Where.sort = "[{0}]:{1}".format(colName, listSort[1] == "desc" ? "" : "desc");
where.sort = "[{0}]:{1}".format(colName, listSort[1] == "desc" ? "" : "desc");
}
var ajax = new FixTable();
ajax.GetTable(param); //调用ajax异步调用方法
};