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

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

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

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

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

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

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

/**
 * 自定义复选框
 */
function operateTrunk(el, options, rowData) {
    if (rowData.id !="default") {
        return "<input type='checkbox' οnclick='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 οnchange='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)
}

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

相关推荐