jqGrid自定义复选框或下拉列表后的选中事件

首先纪念一下,今天2020年4月4日,一个特殊的日子,全国都在降半旗,上午十点钟所有的车都停止鸣笛三分钟,警报响起,缅怀因新冠病毒而牺牲的医护人员以及因新冠而失去生命的普通百姓。今天本来是清明假期,但是早上睡不着觉,索性来公司加班,完成这个昨天没有搞定的jqGrid自定义复选框的问题。

首先一张图描述一下我想要的效果:

效果图

接下来看看代码是怎么实现的:

自定义复选框

判断选中未选中

差不多实现就是这样实现的,接下来上代码:

第一部分自定义复选框部分:

/**
 * 自定义复选框
 */
function operateTrunk(el, options, rowData) {
    if (rowData.id !="default") {
        return "<input type='checkbox' onclick='clickTrunk(\"" + rowData.id  + "\")'>"
    }
    return"";
}

第二部分,判断选中未选中,对其进行操作部分:

/**
 * 点击的时候,除当前点击之外的所有表格项都disabled禁用掉
 * @param e
 */
function clickTrunk(e) {
    var tdChilds = event.target.parentNode.parentNode.childNodes;
    if (event.target.checked == true) {
        // console.log("选中");
        tdChilds[0].childNodes[0].setAttribute("disabled","disabled");
        tdChilds[4].childNodes[0].setAttribute("disabled","disabled");
        tdChilds[5].childNodes[0].setAttribute("disabled","disabled");
        tdChilds[6].childNodes[0].setAttribute("disabled","disabled");
        tdChilds[7].childNodes[0].setAttribute("disabled","disabled");
    } else {
        // console.log("没有选中");
        tdChilds[0].childNodes[0].removeAttribute("disabled");
        tdChilds[4].childNodes[0].removeAttribute("disabled");
        tdChilds[5].childNodes[0].removeAttribute("disabled");
        tdChilds[6].childNodes[0].removeAttribute("disabled");
        tdChilds[7].childNodes[0].removeAttribute("disabled");
    }

}

这样复选框的功能就这样实现了,接下来下拉列表就很简单了,同样的道理,我就直接上代码了:

第一部分自定义下拉列表部分:

/**
 * 自定义下拉列表
 */
function operateEscape(el, options, rowData) {
    if (rowData.id !="default") {
        return "<select onchange='onchangeOperateEscape(\"" +  rowData.id + "\")'  style='border: 1px solid #ccc;width: 150px;height: 28px;line-height: 28px;'><option>下拉1</option><option>下拉2</option></select>"
    }
    return"";
}

第二部分,获取下拉列表选中值部分

/**
 * 下拉列表发生变化时获取value值
 * @param e
 */
function onchangeOperateEscape(e) {
    //下拉列表发生变化时获取当前value值
    console.log("event.target",event.target.value)
}
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值