完成效果:
需求:
根据数据配置来展示的类似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, //是否自动序号 默认true colOrderKey:"", onDetail:null, //function(pData,pDom) onClick:null, //function(pData) onDoubleClick:null //function(pData)
未完待续……
时间: 2024-10-01 21:49:51