基于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)

 未完待续……