element中实现点击表头触发筛选下拉框

有时在表格中又有排序和筛选功能的时候不能点击表头触发筛选或者排序的触发
在这里插入图片描述
在这种情况下,首先在table中添加header-click触发函数
<el-table @header-click="headerClick">
然后在headerClick获取触发源的子节点,也就是筛选的按钮
在这里插入图片描述
在这里插入图片描述
然后触发该节点的点击事件click()就可以了

headerClick(column, event){
        event.target.childNodes[2].click()
        console.log('ooo',event)
      },
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现 jqgrid 表头筛选下拉框,可以按照以下步骤操作: 1. 在 colModel 设置 stype 为 select,如下: ``` { name: 'xxx', index: 'xxx', stype: 'select', searchoptions: { value: ':All;1:Option1;2:Option2;3:Option3' } } ``` 其,value 属性的字符串是下拉框的选项,格式为 label:value,多个选项之间用分号隔开,第一个选项必须为 All(或者 Any),表示所有选项。 2. 在 jqGrid 的 options 添加如下代码: ``` { // ... postData: { filters: function () { var columnData = $("#grid").jqGrid('getGridParam', 'postData').columns; var postData = JSON.stringify({ groupOp: "AND", rules: [{ field: columnData[0].name, op: "eq", data: columnData[0].searchValue }, { field: columnData[1].name, op: "eq", data: columnData[1].searchValue }] }); return postData; } }, // ... } ``` 其,postData 的 filters 属性用于设置筛选条件,rules 数组的每个元素表示一个筛选条件,包含三个属性:field(列名)、op(操作符)、data(筛选值)。这里的 columnData 是获取当前 jqGrid 的 postData 的 columns 属性。 3. 在 jqGrid 的 options 设置 search 属性为 true: ``` { // ... search: true, // ... } ``` 4. 在 jqGrid 添加一个按钮,用于触发表头筛选: ``` $("#grid").jqGrid('navGrid', '#pager', { edit: false, add: false, del: false, search: false }) .jqGrid('navButtonAdd', '#pager', { caption: "Search", title: "Toggle Searching Toolbar", buttonicon: 'ui-icon-search', onClickButton: function () { $("#grid")[0].toggleToolbar(); } }); ``` 这样就可以实现 jqgrid 表头筛选下拉框了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值