jqgrid内联编辑:动态设置列可以正确编辑另一列

时间:2014-09-23 09:38:59

标签: javascript php jqgrid

当我在内联编辑期间更改特定列的值时,我想动态更改同一行的另一列的可编辑属性值。以下是我的代码的一部分:

{ name: "admin", width:250, editable:<?php echo $owner; ?>, edittype:"custom", editoptions: {
            custom_element: myelem,
            custom_value:myvalue,
            dataEvents: [{
                    type: 'change',
                    fn: function (e) {
                        var $this = $(e.target), $td, rowid;
                        var radSel = $(e.target).val(); //alert(radSel);
                        if(radSel == "No"){
                            if ($this.hasClass("FormElement")) {
                                $("#request").prop("editable", true);
                            } else {
                                //alert("you are here!!");
                                var row = $this.closest('tr.jqgrow');
                                var rowId = row.attr('id'); //alert(rowId);
                                $("#" + rowId + '_request').prop("editable", true);
                            }
                        }
                     }
            }]

    }},
{ name: "request", width: 100},
......

function myelem (value, options) {
var radio1 = document.createElement('input');
radio1.id = 'radY';
radio1.type = 'radio';
radio1.name = 'appr';
radio1.value = 'Yes';
if(value.match(/^Yes.*/)){ radio1.checked = true; }

var radio2 = document.createElement('input');
radio2.id = 'radN';
radio2.type = 'radio';
radio2.name = 'appr';
radio2.value = 'No';
if(value.match(/^No.*/)){ radio2.checked = true; }

var label1 = document.createElement('label');
label1.setAttribute('for', radio1.id);
label1.innerHTML = 'Yes';

var label2 = document.createElement('label');
label2.setAttribute('for', radio2.id);
label2.innerHTML = 'No';

var container = document.createElement('div');
container.appendChild(radio1);
container.appendChild(label1);
container.appendChild(radio2);
container.appendChild(label2);

return container;
}

function myvalue(elem, operation, value) {
    if(document.getElementById('radY').checked) {return "Yes";}
    else if(document.getElementById('radN').checked) {return "No";}
    else {return ""; }
} 

当我将单选按钮更改为“否”时, 进入if循环(在dataEvents下),但'request'列上的editable属性未动态设置为true。任何帮助非常感谢。感谢。

1 个答案:

答案 0 :(得分:0)

在开始编辑之前,jqGrid 将使用editable属性。 如果您想要阻止动态修改,则必须在相应的现有编辑字段中设置禁用或readonly属性/属性,而不是设置editable属性。

此外,您似乎为自定义编辑字段分配了修复id属性('radN''radY')。这很危险,因为你可以有id个重复项。内联编辑允许您同时编辑多行。在这种情况下,将创建两个具有相同ID的自定义编辑元素,您将遇到问题。我建议您另外在<input>内设置<label>。如果您不需要任何idfor属性。尝试

<label><input type="radio" name="appr" checked="checked" value="Yes"/>Yes</label>
&nbsp;
<label><input type="radio" name="appr" value="No"/>No</label>

可以通过单击标签来检查单选按钮。