JQuery JTable是一个方便快捷的前端页面数据呈现组件,它通过自动化的方式将服务器返回的数据呈现在页面中,而且用户可以通过各种自定义设置实现不同的展示效果。其中一个常用的功能就是隐藏列选项,可以隐藏任意一列中的数据,以适应不同的业务需求。
$(document).ready(function () { $('#data-table').jtable({ title: '数据表格 Demo', paging: true, // 是否开启分页功能 pageSize: 10, // 每页显示的数据条数 sorting: true, //是否开启排序功能 defaultSorting: 'Age ASC', // 默认排序规则 actions: { listAction: '/Student/StudentList', // 从后台获取数据的api接口 createAction: '/Student/Create', // 添加一条数据 updateAction: '/Student/Update', // 修改一条数据 deleteAction: '/Student/Delete' // 删除一条数据 }, fields: { StudentId: { key: true, list: false }, FirstName: { title: '名字' }, LastName: { title: '姓氏' }, Age: { title: '年龄', width: '15%', list: false }, Gender: { title: '性别', options: { 'M': '男', 'F': '女'} } } }); // 隐藏某一列 $('#data-table').jtable('hideColumn', 'Age'); });
上述代码主要是通过jQuery JTable插件提供的hideColumn方法,进行选中列的隐藏操作。所以通过设置一个参数“list: false”就可隐藏某一列。同理,您也可以通过removeColumn方法删除某一列。
除此之外,您还可以通过在页面中添加隐藏列相关的按钮等交互操作,让用户可以灵活的自主选择需要隐藏的列,从而让您的应用更加实用。
查看更多关于jquery jtable 隐藏列的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did239801