LIst<model>或者datatble 拼成table，并固定表头和列

//页面初始化 加载 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='#' onclick='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异步调用方法
};