easyui 之 datagrid動態列與列寬自適應

1、easyui datagrid 簡單描述

    easyui是一個基於jquery的開發ui控件，使用起來比較簡單。想要深刻了解的話能夠去官看研究api。datagrid的初始化代碼以下：

  $("#id").datagrid( {
   url : 'url' ,
   columns :[[
   { field : 'code' , title : 'Code' , width : 100 },
   { field : 'name' , title : 'Name' , width : 100 },
   { field : 'price' , title : 'Price' , width : 100 , align : 'right' }
   ]]

  }

  //...其餘屬性

 )

 其實就是給初始化函數傳一個json格式的數據過去。url的值請求的服務器地址，columns是表明全部列的一個json。field對應服務器返回來的須要展現的數據的屬性（名稱要相同），title是頁面展現的名稱，width：列寬。

2、實現方式

   遍歷後臺返回的數據，根據內容計算出每列的像素，重組columns 須要的數據，來初始化datagrid

3、代碼

var AutoColDatagrid = function () {

//對外公佈的函數
    return {
        initAutoColDatagrid:function (url, param, id) {
            $.post(url, param, function (data) {
                var showData = parse(data);
                initDataGrid(showData);
            })
        }
    };

    // 私有的函數--start

    //初始化datagrid
    initDataGrid : function (id, showData) {
        $("#" + id).datagrid({
            pagination:false,
            data:showData.content, //showData.content 爲datagrid能夠識別的json數據格式，showData.column也是同理
            columns:showData.column
        })
    }
    /**
     *json格式：
     *{fields_cn：中文名稱數組,fields:英文名稱數組(順序要和中文名稱要一一對應),records：datagrid能識別的json數據格式}
     */
    parser : function (responeData) {
    }
    {
        var titlesCN = this['fields_cn'];
        var titlesEN = this['fields'];
        var contentJson = this['records'];
        var column = [];
        for (var j in titlesCN) {
            //定義Field的長度 -- start
            var fieldName = titlesEN[j],
                titleName = titlesCN[j];
            var strLen = getFieldLongestStr(fieldName, contentJson);
            var titleLen = getStrLen(titleName);
            //根據 titleName 或者 fieldValue來取像素
            var fieldWidth = getPixelByStrLen(strLen > titleLen ? strLen : titleLen);
            //--end
            var tn = {
                title:titleName,
                field:fieldName,
                width:fieldWidth
            };
            column.push(tn);
        }
        return {content:contentJson, column:column };
    };
    /**
     * 獲取字符串長度
     * @return {Number}
     */
    getStrLen : function(obj) {
        var len = 0;
        //將數字類型轉換爲字符串類型
        if (typeof(str) == 'number') {
            str = str.toString()
        }
        for (var i = 0; i < str.length; i++) {
            var c = str.charCodeAt(i);
            //單字節加1
            if (c >= 0 && c <= 128) {
                len++;
            } else {
                len += 2;
            }
        }
        return len;
    };


    /**
     *  在data中去的屬性名爲field的值的最長字符串
     * @param field
     * @param data （josnArray格式）
     */
    getFieldLongestStr : function(field, data) {
        var rt = 0;
        $(data).each(function (i) {
            var temp = getStrLen(this[field]);
            if (temp > rt) {
                rt = temp;
            }
        })
        return rt;
    };


    /**
     * 根據strLen來定義field的像素
     * @param strLen
     * @return {Number}
     */
    getPixelByStrLen : function (strLen) {
        var rtWith = strLen * 7;
        //設置最短最長長度
        rtWith = rtWith < 80 ? 80 : (rtWith > 370 ? 370 : rtWith);
        return rtWith;
    };
//AutoColDatagrid 私有的函數--end

}

4、使用例子

在一個頁面裏寫js，

var demo = new AutoColDatagrid ();

demo.initAutoColDatagrid("url","queryParam","div_id");