欢迎光临
其心休休焉,其如有容

jqgrid实现单选功能

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

未经允许不得转载:容休博客 » jqgrid实现单选功能

分享到

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址