优米格
分享有营养的

jqgrid实现单选功能

BraUndress.png

jqgrid默认没有提供单选功能,但是提供了多选功能(multiselect),因此可以通过隐藏多选按钮,每次选择的一条记录的时候重置一下选择列表的方式实现单选:

假设你的html部分代码如下:

<table id="gridTable"></table>
<div id="pgridTable"></div>

加载表格的js代码如下:

$(function(){

var mydata = [
    {
    id: "1",
    invdate: "2010-05-24",
    name: "test",
    note: "note",
    tax: "10.00",
    total: "2111.00"},
{
    id: "2",
    invdate: "2010-05-25",
    name: "test2",
    note: "note2",
    tax: "20.00",
    total: "320.00"}
];
$("#gridTable").jqGrid({
    data: mydata,
    datatype: "local",
    height: 150,
    rowNum: 999999,
    scroll: true,
    colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
    colModel: [
        {
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'invdate',
        index: 'invdate',
        width: 90,
        sorttype: "date",
        formatter: "date"},
    {
        name: 'name',
        index: 'name',
        width: 100},
    {
        name: 'amount',
        index: 'amount',
        width: 80,
        align: "right",
        sorttype: "float",
        formatter: "number"},
    {
        name: 'tax',
        index: 'tax',
        width: 80,
        align: "right",
        sorttype: "float"},
    {
        name: 'total',
        index: 'total',
        width: 80,
        align: "right",
        sorttype: "float"},
    {
        name: 'note',
        index: 'note',
        width: 150,
        sortable: false}
    ],
    pager: "#pgridTable",
    viewrecords: true,
    multiselect: true,
    beforeSelectRow: function(rowid, e){
        jQuery("#gridTable").jqGrid('resetSelection');
        return(true);
    }

});

var myGrid = $("#gridTable"); 
$("#cb_"+myGrid[0].id).hide();

}); 
</script>

其中,关键部分代码是:

//实现多选
multiselect: true

//实现每次选择之前重置一下选择项
beforeSelectRow: function(rowid, e){
        $("#gridTable").jqGrid('resetSelection');
        return(true);
}

//移除多选表头上的多选框
var myGrid = $("#gridTable"); 
$("#cb_"+myGrid[0].id).hide();

示例请参考:jqgrid Single Selection

赞(0)
未经允许禁止转载:优米格 » jqgrid实现单选功能

评论 抢沙发

合作&反馈&投稿

商务合作、问题反馈、投稿,欢迎联系

广告合作侵权联系