Question

我在页面中有以下代码，它将数据绑定到j查询网格。

现在我想为现有网格添加一个复选框列，当我选中一些复选框并按下某个按钮时......我需要获取所选行值。

我已经看过他们提到的一些关于某些格式化程序的教程......但它们并不清楚

请帮助我实现这一目标。

提前致谢。

代码：

$(document).ready(function () {
            $("#btn_GenerateEmpList").click(function () {
                var firstClick = true;
                if (!firstClick) {
                    $("#EmpTable").trigger("reloadGrid");
                }
                firstClick = false;
                var empId=  $("#txt_emp").val();

                $.ajax({
                    type: "POST",
                    url: "PLBased.aspx/GetEmpNames",
                    data: JSON.stringify({ empId: empId}),
                    contentType: "application/json;charset=utf-8",
                    dataType: "json",

                    success: function (result) {

                        result = result.d;
                        jQuery("#EmpTable").jqGrid({
                            datatype: "local",
                            colNames: ['Emp Name'],
                            colModel: [
                                    { name: "EmpName", Index: "EmpName", width: 80 }
                            ],
                            data: JSON.parse(result),
                            rowNum: 10,
                            rowList: [5, 10, 20],
                            pager: '#pager',
                            loadonce: false,
                            viewrecords: true,
                            sortorder: 'asc',
                            gridview: true,
                            autowidth: true,
                            sortname: 'EMPID',
                            height: 'auto',
                            altrows: true,

                        });
                    },
                    error: function (result) {

                        alert("There was some error ");
                    }
                });
            });

        });

Answer 1

您可以使用customformatter在列中显示复选框。为此，您可以在jqGrid代码中编写如下代码。

colNames: ['Id','Emp Name','Emp Checkbox'],
colModel: [
            { name: 'Id', index: 'Id', hidden: true },
            { name: 'EmpName', Index: 'EmpName', width: 80 },
            { name: 'Empchk', Index: 'Empchk', width: 50, align: 'center', editable: true, edittype: "checkbox", editoptions: { value: "true:false" },
                formatter: generateEmpCheckBox, formatoptions: { disabled: false } }
          ],

formatter功能代码如下，

function generateEmpCheckBox(cellvalue, options, rowObject) {
    var checkedStr = "";
    if (cellvalue == true) {
        checkedStr = " checked=checked ";
    }
    return '<input type="checkbox" onchange="UpdateEmpcheckbox(' + rowObject.Id + ',this)" value="' + cellvalue + '" ' + checkedStr + '/>';
}

function UpdateEmpcheckbox(selectedId, chkBox) {
    if ($(chkBox).prop("checked")) {
        //you can write an ajax here, to update the server
        //when the checkbox is checked
    }
    else if (!($(chkBox).prop("checked"))) {
          //you can write an ajax here to update the server
          //when the checkbox is unchecked
    }
  return false;
}

Answer 2

设置选项multiselect：true，这将添加复选框列。然后添加

$（'＃EmpTable'）。jqGrid（'getGridParam'，'selarrrow'）

将返回一个选定id的数组。

在Jquery网格视图中添加复选框

2 个答案: