首页 > 代码库 > 基于jquery、模板引擎、自定义事件类实现GridView组件

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

 未完待续……

基于jquery、模板引擎、自定义事件类实现GridView组件