好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

jquery jtable 隐藏列

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 隐藏列的详细内容...

  阅读:23次

上一篇: jquery jtable 参数

下一篇:jquery js混用吗