JqGrid 添加单选列

1.效果


2.html代码

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  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 + "'οnclick='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 + "'οnclick='setmytxt(" + cl + ");' />";
                jQuery("#droptable").jqGrid('setRowData', cl, {
                    isText: bnEdt
                });
            }
        }
    });

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

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


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值