标签:des style blog http io color sp for 数据
完成效果:


需求:
根据数据配置来展示的类似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)
未完待续……
基于jquery、模板引擎、自定义事件类实现GridView组件
标签:des style blog http io color sp for 数据
原文地址:http://www.cnblogs.com/beiou/p/4113327.html