jquery插件flexigrid列表显示隐藏

今天做公司后台管理系统的时候有个很常见的需求,某几个列需要根据配置文件来显示和隐藏。页面用的是jquery.flexigrid.trace.js。在此记录下
flexigrid的option>colModel属性如下

colModel : [
			{display: 'id',  width : 150, sortable : true, align: 'left', toggle:false, hide:true,process:operation}
			],

其中上面加粗的三个属性是我们经常会用到的

  • [ hide] 配置当前列显示或者隐藏,需要注意的是,这个属性需要配合option属性中showToggleBtn来使用,当showToggleBtn属性为true是,允许用户在页面选择展示hide=true的列。如下图所示,在列表右侧有下拉箭头,点开后可以选择之前隐藏的数据。
  • 在这里插入图片描述
  • [ toggle] 如果列属性toggle=false 则此列不会出现在上图展开的列表中,此配置项往往和hide=true一起使用,来达到列彻底隐藏的目的。
  • [process] 为列显示之前的处理函数,此属性应用比较广泛,比如对后台的数值型数据转换成对应的文字显示,按照格式输出数据等等。
    参数为函数名。
    callback(value,pid,rowdata)
    函数默认有三个参数,其中value为当前列的值,pid为当前列的id,rowdata为此条数据拼接而成的字符串。

下面附flexigrid的基础配置项
参考链接

flexigrid参数说明:
    height: 200, //flexigrid插件的高度,单位为px
    width: 'auto', //宽度值,auto表示根据每列的宽度自动计算,在IE6下建议设置具体值否则会有问题
    striped: true, //是否显示斑纹效果,默认是奇偶交互的形式
    novstripe: false,//没用过这个属性
    minwidth: 30, //列的最小宽度
    minheight: 80, //列的最小高度
    resizable: false, //resizable table是否可伸缩
    url: false, //ajax url,ajax方式对应的url地址
    method: 'POST', // data sending method,数据发送方式
    dataType: 'json', // type of data loaded,数据加载的类型,xml,json
    errormsg: '发生错误', //错误提升信息
    usepager: false, //是否分页
    nowrap: true, //是否不换行
    page: 1, //current page,默认当前页
    total: 1, //total pages,总页面数
    useRp: true, //use the results per page select box,是否可以动态设置每页显示的结果数
    rp: 25, // results per page,每页默认的结果数
    rpOptions: [10, 15, 20, 25, 40, 100], //可选择设定的每页结果数
    title: false, //是否包含标题
    pagestat: '显示记录从{from}到{to},总数 {total} 条', //显示当前页和总页面的样式
    procmsg: '正在处理数据,请稍候 ...', //正在处理的提示信息
    query: '', //搜索查询的条件
    qtype: '', //搜索查询的类别
    qop: "Eq", //搜索的操作符
    nomsg: '没有符合条件的记录存在', //无结果的提示信息
    minColToggle: 1, //允许显示的最小列数
    showToggleBtn: true, //是否允许显示隐藏列,该属性有bug设置成false点击头脚本报错。
    hideOnSubmit: true, //是否在回调时显示遮盖
    showTableToggleBtn: false, //是否显示【显示隐藏Grid】的按钮
    autoload: true, //自动加载,即第一次发起ajax请求
    blockOpacity: 0.5, //透明度设置
    onToggleCol: false, //当在行之间转换时,可在此方法中重写默认实现,基本无用
    onChangeSort: false, //当改变排序时,可在此方法中重写默认实现,自行实现客户端排序
    onSuccess: false, //成功后执行
    onSubmit: false, // 调用自定义的计算函数,基本没用      
    //Style
    gridClass: "bbit-grid"//样式          
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值