JqGrid 添加单选列

1.效果

JqGrid 添加单选列_第1张图片

2.html代码

[html]  view plain copy
  1. <table id="droptable"></table>  

3.在$(function (){...} 方法中,写如下方法,用json数据填充jqGrid,实现把“键值”和“显示值”设为单选

jQuery("#droptable").jqGrid({
        datatype: "local",
        data: mydata2,
        colNames: ['编号', '字段名称', '字段描述', '字段类型', '主Guid', '子Guid','IsPK', '键值', '显示值'],
        colModel: [
             { name: 'ID', index: 'ID', width: 35, align: 'center', key: 'true' },
             { name: 'fieldName', index: 'fieldName', width: 100 },
             { name: 'fieldDisc', index: 'fieldDisc', width: 196, editable: true, editoptions: { maxlength: "20" } },
             { name: 'fieldType', index: 'fieldType', width: 100 },
             { name: 'mainGuid', index: 'mainGuid', width: 100, hidden: true },
             { name: 'subGuid', index: 'subGuid', width: 100, hidden: true },
             { name: 'IsPk', index: 'IsPk', width: 53, hidden: true },//显示取出来IsPKey为真的作键值
             { name: 'isValue', index: 'isValue', width: 53 },//用户选取键值         
             { name: 'isText', index: 'isText', width: 53 }//用户选取显示值
        ],
        width: 565,
        height: 'auto',
        rowNum: 10,
        rowList: [10, 20, 30],
        recordpos: 'left',
        viewrecords: true,
        caption: tabName,
        loadtext: "Loading....",
        sortable: false,
        //ondblClickRow双击执行编辑             
        ondblClickRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#droptable').jqGrid('restoreRow', lastsel);
                jQuery('#droptable').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: "/BindData/JqGridHandler.ashx?sign=getData",
        //增加radio按钮
        gridComplete: function () {
            var ids = jQuery("#droptable").jqGrid('getDataIDs');
            //键值列的单选按钮
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                var ret = jQuery("#droptable").jqGrid('getRowData', cl);
                bnEdt = "<input type='radio' name='myname' value='" + ret.subGuid + "'onclick='setmyval(" + cl + ");' />";
                jQuery("#droptable").jqGrid('setRowData', cl, {
                    isValue: bnEdt
                });
            }
            //显示值列的单选按钮
            for (var i = 0; i < ids.length; i++) {
                var cl = ids[i];
                var ret = jQuery("#droptable").jqGrid('getRowData', cl);
                bnEdt = "<input type='radio' name='myname2' value='" + ret.subGuid + "'onclick='setmytxt(" + cl + ");' />";
                jQuery("#droptable").jqGrid('setRowData', cl, {
                    isText: bnEdt
                });
            }
        }
    });

4. 获得选中的单选的方法

//获得 选中的键值和显示值保存到keyField和txtField变量中
function setmyval(id) {
    keyField = id;
}
function setmytxt(txt) {
    txtField = txt;
}


你可能感兴趣的:(JqGrid 添加单选列)