jqGrid在隐藏字段中获取未选中的复选框值

时间:2014-11-14 11:44:17

标签: javascript jquery html checkbox jqgrid

jqGrid结构:

<script>
var call_url = "<?php echo $url;?>";
jQuery("#task-grid").jqGrid({
    url:call_url,
        datatype: "json",
    height: 'auto',
    rowNum: 20,
    rowList: [20,30],
    colNames:['ID','RESOURCE','ROLE','SITE', 'ALLOCATION TYPE', 'UNIT (%)'],
    colModel:[
                {name:'ID',key:true,index:'ID', width:50, align:'center',search:false,hidden: false},
        {name:'RESOURCE',index:'RESOURCE', width:150, sorttype:"text",align:'center',search:true},
        {name:'ROLE',index:'ROLE',width:120 ,align:'center',search:false},
        {name:'SITE',index:'SITE', width:120, align:'center',search:false},
        {name:'ALLOC. TYPE',index:'ALLOCATION_TYPE', align:'center',width:120,search:false },
        {name:'UNIT',index:'UNIT',align:'center',search:false},     
        //{name:'HOURS',index:'HOURS', search:false, align:'center',sortable:false,editable:true}
    ],
    pager: "#page",
    shrinkToFit :true,
    autowidth: true,
    viewrecords: true,
    sortname: 'RESOURCE',
        sortorder: "asc",
        multiselect: true,
        cellEdit: true,
        cellsubmit : 'clientArray',
    caption: "Resource List",

         onSelectRow: function(rowid,iRow,iCol,e){alert(rowid);},

        loadComplete: function (data) {
            var ids = $("#task-grid").jqGrid('getDataIDs');
            for (var i = 0; i < ids.length; i++){
                var rowId = ids[i];
                $("#task-grid").jqGrid('setSelection', rowId, false);
                //console.log(rowId);
            }
        }
}).navGrid('#page',{ edit:false,add:false,del:false,search:false,cloneToTop:true,refresh:false},
            {

             },{
             //add options

             },{

                        //msg: "do you really want delete this keyword? This delete affect on Eqms filter"

               });


                jQuery("#task-grid").jqGrid('filterToolbar', { autosearch: true  });
        var topPagerDiv = $('#grid_toppager')[0]; 
        jQuery("#grid_toppager_center", topPagerDiv).remove(); 
</script>

Checkbox Selected

Checkbox Unselected

获取所选ID的代码

<input type="hidden" name="emp_id_checked" value=""/>
<script>
var Ids = jQuery("#task-grid").jqGrid('getGridParam','selarrrow');
var empIds = $("input[type=hidden][name=emp_id_unchecked]").val(Ids);
</script>

我在页面加载时选中了ID (12860)复选框,但是当取消选中时,如何将复选框值12860传递给隐藏的输入字段?

由于

1 个答案:

答案 0 :(得分:0)

onSelectRowonSelectAll回调是对选择/取消选择行执行任何其他操作的最佳位置。回弹的第二个参数status通知是检查还是取消选中行/行。

更新:我为您创建了the corresponding demo。我将未检查行的rowid列表放在可见<p>元素内,以便于查看结果。我使用了以下代码:

multiselect: true,
unselectedRowIds: [], // custom option where we will hold unselected ids
onSelectRow: function (rowid, status) {
    var p = $(this).jqGrid("getGridParam"), i = $.inArray(rowid, p.unselectedRowIds);
    //alert("row with id=" + rowid + " is " + (status ? "selected" : "unselected"));
    if (status && i >= 0) {
        // need be removed
        p.unselectedRowIds.splice(i, 1);
    } else if (!status && i < 0) {
        p.unselectedRowIds.push(rowid);
    }

    // update "hidden" control
    $("#unselectedRows").text(p.unselectedRowIds.join(","));
},
onSelectAll: function (rowids, status) {
    var p = $(this).jqGrid("getGridParam");

    if (status) {
        p.unselectedRowIds = [];
    } else {
        p.unselectedRowIds = rowids.slice(0); // copy of the array
    }

    // update "hidden" control
    $("#unselectedRows").text(p.unselectedRowIds.join(","));
},
loadComplete: function () {
    $("#cb_" + $.jgrid.jqID(this.id)).click(); // select all rows
}

请注意,您应删除不需要的cellEdit: true选项(网格没有任何可修改的列),因为该选项会更改行选择的行为。