基於jquery、模板引擎、自定義事件類實現GridView組件

完成效果：

需求：

根據數據配置來展現的相似GridView。

設計配置項：

datasource:[{},{}],     //數據源綁定 json格式
width:null,             //默認不設置 自動獲取父節點的寬度
height:200,             //列表高度
pageModule:{                    //--分頁配置--
    index:1,                    //當前頁
    pageNum:50,                 //每頁顯示數量
    total:,                     //總數
    pageRate:[50,100,200,500],  //設置每頁顯示數量
    onChange:function(pIndex),  //分頁事件回調
    onSetNum:function(pNum),    //設置每頁顯示數量
},
colHead:[    //列頭合併用
    { title:"我是合併1",rowspan:2 }
],
colModule:[{            //--字段映射文本配置--
    name:"",            //屬性名
    title:"",           //列頭名
    width:100,          //寬度 例如：100=100px
    align:"left",       //對齊方式：left center right
    className:"",       //默認無樣式  可添加空格分割的class 可控制子元素樣式
    type:"Label",       //默認顯示Label 輸入框Text 選擇框Select 彈層MaskSelect 4種
    formatter:null,     //function(val)  格式化數據用，只適用於Label與Text列
    bindDataSource:[],  //Select綁定數據 {key:"",value:""}
    triggerList:[       //綁定多個事件
　　 　　{
　　　　　　triggerType:"blur",                            　　　　//綁定事件類型
    　　　 triggerChange:function(pData,pBtn,pRowPanel),         //綁定事件回調
    　　}
 　 ]
    onMask:function(pData,pBtn,pRowPanel){},                    //MaskSelect的click回調
}],
rowAddModule:"col1,col2,col3",            //行新增配置
templateModule:[],
/*[]調整
{
    isDisable:false,        //默認不由用
    title:"修改",           //按鈕文本
    class:"bluebtn",        //按鈕樣式  藍色bluebtn 灰色graybtn 橘色orangebtn
    iClass:"icon-pencil",   //圖標樣式
    onChange:null           //點擊回調 function(pData)
}*/
sortModule:{    //排序模塊
    global:false       //是否全局排序  默認false 爲true不執行本地排序但觸發onChange
    onChange:function(sortName,sortOrder) //sortName排序屬性、sortOrder排序方式 desc降序 esc升序 
}
otherItems:[    //其餘數據的配置功能
    { title:"",text:"" }
],
isCheckBox:false, //是否可選功能，列頭全選:true false 默認false
isSort:true,  　　 //是否開啓排序 默認true
isNumber:true,　　 //是否自動序號 默認true
colOrderKey:"",
onDetail:null,       //function(pData,pDom)
onClick:null,        //function(pData)
onDoubleClick:null   //function(pData)

 未完待續……