创建datatable

/**
 * 用于构造一个data table
 * @param containerDivId 包含table的容器DIV id
 * @param tableId 要创建的table id
 * @param thead  表头列表 e.g ['名字','年龄']
 * @param columnNameOrder  每一列对应后台的字段['name','age']
 *        1.你可以写要显示的字段名eg:['name','age'],
 *        2.还可以写一个function
 *        eg:['name',function(row){somestring + row.age or other html}]
 *        3.还可以写一个对像来指定此列的样式eg:['name',{column:"age" or function,css:"width:20px;"}]
 * @param rowData  行数据   [{},{},{}]
 * @param hasRowNum 是否有行号
 * @param hasCheckbox 是否要checkbox
 * @param 如果hasCheckbox = true  ,
 * @param checkboxName代表
 *      <input type="checkbox" name="?"> 中的name叫什么
 * @param checkboxValueColumn  如果hasCheckbox = true
 *  ckValueUseColumn 代表checkbox  的value值使用哪个字段
 *  
 * @param checkedValues 选中的checkbox value列表
 * @param dataTableOps 是datatable的配置属性
 * @Author gaochenghao
 * 使用DEMO
 * new GCreateTable({
            "containerDivId":"mod_del_div",
             "tableId" : 'table_modify_del1',
             "thead" : ["商品名称","skuid","保存状态","支持自定义函数和样式的列"],
             "columnNameOrder":["name","skuid",function(row){return row.showName;},{column:function(row){return "sdf";},css:"text-align:left;"}],
             "rowData":data,
             "hasRowNum":true,
             "hasCheckbox":true,
             "checkboxName":"mod_del_checked",
             "ckValueUseColumn":"skuid"
        });    
 *
 */
function GCreateTable(option){
    this.ops={
         containerDivId:"default_div",
         tableId : 'default_table',
         thead : ["无"],
         columnNameOrder:[],
         rowData:[],
         hasRowNum:true,
         hasCheckbox:false,
         checkboxName:"",
         ckValueUseColumn:"",
         checkedValues:[],
         dataTableOps:{
             bAutoWidth:true,
            bFilter:false,
            bPaginate:true,
            bInfo:false,
            bProcessing: true,
            iDisplayLength:10,
            sPaginationType:"full_numbers"//分页
         }
    };
    //checkbox 选中的value列表
    this.checkedValues = {};
    //初始化参数
    this.ops = $.extend(true,this.ops,option);
    //处理null undefined ...
    !!this.ops.checkedValues ? "":this.ops.checkedValues = [];
    //如果有checkbox
    if(this.ops.hasCheckbox){
        for(var c = 0; c <this.ops.checkedValues.length; c++ ){
            this.checkedValues[this.ops.checkedValues[c]] = this.ops.checkedValues[c];
        }
    }
    var tableString = [];
    tableString.push("<table cellpadding='0' cellspacing='0' border='1' class='display' id='"+this.ops.tableId+"'>");
    tableString.push("<thead>");
    tableString.push(    "<tr>");
    //表头
    if(this.ops.hasCheckbox){
        tableString.push("<th><input type='checkbox' id='"+this.ops.checkboxName+"_ckAll'/> </th>");
    }
    //行号
    if(this.ops.hasRowNum){
        tableString.push("<th>No.</th>");
    }
    for(var j= 0; j <this.ops.thead.length; j++){
        tableString.push(     "<th>");
        tableString.push(        this.ops.thead[j]);
        tableString.push(     "</th>");
    }
    tableString.push(    "</tr>");
    tableString.push("</thead><tbody>");
    //表数据
    !!this.ops.rowData ? "":this.ops.rowData = [];
    for(var r = 0; r < this.ops.rowData.length; r ++){
            tableString.push("<tr>");
            if(this.ops.hasCheckbox){
                tableString.push("<td><input type='checkbox' name='"+this.ops.checkboxName+"' value='" + this.ops.rowData[r][this.ops.ckValueUseColumn]+"'");
                if(this.checkedValues[this.ops.rowData[r][this.ops.ckValueUseColumn]] != undefined){
                    tableString.push("checked='checked'");
                }
                tableString.push("/></td>");
            }
            if(this.ops.hasRowNum){
                tableString.push("<td>"+(r+1)+"</td>");
            }
            for(var row_n_o =0;row_n_o < this.ops.columnNameOrder.length;row_n_o++){
                var columnOps = this.ops.columnNameOrder[row_n_o];
                if($.isFunction(columnOps)){
                    //支持列内显示内容的自定义,此处会把行数据传入自定义FUNCTION中
                    tableString.push("<td>" + columnOps(this.ops.rowData[r]) + "</td>");
                }else if($.isPlainObject(columnOps)){//支持对像参数
                    //{column: "skuid" 或者function(row){...},css:"margin:0;width:20px;"}
                    tableString.push("<td style='");
                    tableString.push(   $.type(columnOps.css)==="string"?columnOps.css:"");
                    tableString.push("'>");
                    if($.type(columnOps.column)==="string"){
                        var cvaluet = this.ops.rowData[r][columnOps.column];
                        tableString.push(((cvaluet==null||cvaluet==undefined)?"":cvaluet) + "</td>");
                    }else if($.isFunction(columnOps.column)){
                        tableString.push(columnOps.column(this.ops.rowData[r]) + "</td>");
                    }
                }else{
                    var cvaluet = this.ops.rowData[r][columnOps];
                    tableString.push("<td>" + ((cvaluet==null||cvaluet==undefined)?"":cvaluet) + "</td>");
                }
            }
            tableString.push("</tr>");
    }
    tableString.push(        "</tbody>");    
    tableString.push("</table>");
    $('#'+this.ops.containerDivId).empty();
    $('#'+this.ops.containerDivId).append(tableString.join(''));
    $("#"+this.ops.tableId).dataTable(this.ops.dataTableOps);
    var classThis = this;
    //绑定checkbox 全选事件
    if(!this.ops.hasCheckbox){return;}
    $('#'+this.ops.checkboxName+"_ckAll").bind('click',function(){
         if($(this).attr("checked")=="checked"){
             $("[name='"+classThis.ops.checkboxName+"']").each(function() {
                 $(this).attr("checked", "true");//选中
             });
         }else{
             $("[name='"+classThis.ops.checkboxName+"']").each(function() {
                 $(this).removeAttr("checked");//取消选中
             });
         }
    });
}