首页 > 代码库 > 基于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组件
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。