基于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 默认falseisSort:true,  　　 //是否开启排序 默认trueisNumber:true,　　 //是否自动序号 默认truecolOrderKey:"",onDetail:null,       //function(pData,pDom)onClick:null,        //function(pData)onDoubleClick:null   //function(pData)

未完待续……