jqgrid 加按钮列

1、在jqgrid表格中增加列,内容是图标,定义图标单击事件,可以操作这一行的数据,如下图


2、前台代码

<div id="grid_List">
    <table id="gridTable" class="datatable"></table>
    <div id="gridPager"></div>
</div>
3、js代码
<script type="text/javascript">
    $(document).ready(function () {
        GetGrid();
        //绑定键盘按下事件
        $(document).keypress(function (e) {
            //回车键事件
            if (e.which == 13) {
                $("#keywords").focus();
                $("#keywords").select();
                $("#btnSearch").click();
            }
        });

    });



    //加载表格
    function GetGrid() {
        var SelectRowIndx;
        $("#gridTable").jqGrid({
            url: "@Url.Content("~/Vehicle/Vehicle/GridPageListJson")",
            datatype: "json",
            mtype: 'POST',
            height: $(window).height() - 130,
            autowidth: true,
            colModel: [
                { label: '编码', name: 'clid', index: 'clid', width: 80, align: 'left', hidden: false ,key:true },
                { label: '车身编码', name: 'vehicle_code', index: 'vehicle_code', width: 100, align: 'left', hidden: false },
                { label: '车牌号码', name: 'cph', index: 'cph', width: 100, align: 'left' },
               
                {
                    label: '启用', name: 'flag', index: 'flag', width: 45, align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        if (cellvalue == '0') return "<img οnclick='imgClick(\"" + options.rowId +"\",0)' src='../../Content/Images/Icon16/accept.png'/>";
                        if (cellvalue == '1') return "<img οnclick='imgClick(\"" + options.rowId + "\",0)' src='../../Content/Images/Icon16/cross_shield.png'/>";
                    },
                },
                {
                    label: '详情', name: '', index: 'operate', width: 50, align: 'center',
                    formatter: function (cellvalue, options, rowObject) {
                        var detail="<img  οnclick='btn_detail(\""+ rowObject.clid + "\")'' title='详细信息' src='../../Content/Images/Icon16/application_view_detail.png' style='padding:0px 10px'>";
                        return detail;
                    },
                },
            ],
            viewrecords: true,
            rowNum: 30,
            rowList: [30, 50, 100, 500, 1000],
            pager: "#gridPager",
            sortname: 'CLID',
            sortorder: 'desc',
            rownumbers: true,
            shrinkToFit: true,
            gridview: true,
            //multiselect: true,
            onSelectRow: function () {
                SelectRowIndx = GetJqGridRowIndx("#" + this.clid);
            },
            gridComplete: function () {
                //LoadViewList();
                //$("#" + this.id).jqGrid('setSelection', SelectRowIndx);
            }
        });
        //自应高度
        $(window).resize(function () {
            $("#gridTable").setGridHeight($(window).height() - 178);
        });
    }

    function imgClick(rowid,type)
    {
        if(rowid=="")
            return;
        AjaxJson("//Vehicle/Vehicle/ChangeState", { id:rowid,type:type}, function (Data) {
            if (Data.Success == true) {

                $("#gridTable").setCell(rowid, 'flag', Data.entity.FLAG);

                tipDialog(Data.Message, 2, 'success');
            }
            else
            {
                tipDialog(Data.Message, 2, 'warning');
            }

        });

    }

    //明细
    function btn_detail(id) {
        var KeyValue = GetJqGridRowValue("#gridTable", "clid");
        if (id!=null) {
            KeyValue=id;
        }
        if (IsChecked(KeyValue)) {
            var url = "/Vehicle/Vehicle/Detail?KeyValue=" + KeyValue;
            Dialog(url, "Detail", "车辆详情", 750, 300, function (iframe) {
                top.frames[iframe].AcceptClick();
            });
        }
    }

</script>


可以使用 jqGrid 自带的 formatter 属性来实现操作。首先,在 colModel 中定义操作的属性,如下: ``` { name: 'operation', index: 'operation', width: 80, sortable: false, formatter: function(_, options, row) { var editBtn = '<button type="button" class="btn btn-xs btn-default editBtn" data-rowid="' + options.rowId + '">编辑</button>'; var delBtn = '<button type="button" class="btn btn-xs btn-danger delBtn" data-rowid="' + options.rowId + '">删除</button>'; return editBtn + ' ' + delBtn; } } ``` 其中,formatter 函数会接收三个参数: 1. `_`: 无意义 2. `options`: 当前单元格的一些属性,包括 rowId(行 ID)、colModel(模型)、pos(当前单元格的左上角坐标)等等 3. `row`: 当前行的数据对象 在 formatter 中,我们可以根据 options 和 row 的值来自定义单元格的显示内容,返回一个 HTML 字符串即可。 然后,在 gridComplete 事件中为操作按钮绑定事件,如下: ``` gridComplete: function() { var $grid = $(this); // 编辑按钮点击事件 $grid.find('.editBtn').on('click', function() { var rowId = $(this).data('rowid'); var rowData = $grid.jqGrid('getRowData', rowId); // TODO:显示编辑对话框,并根据 rowData 的值填充表单 }); // 删除按钮点击事件 $grid.find('.delBtn').on('click', function() { var rowId = $(this).data('rowid'); $grid.jqGrid('delRowData', rowId); }); } ``` 在 gridComplete 中,我们可以利用 jqGrid 对象获取当前表格的 DOM 元素,并对其中的操作按钮绑定点击事件。需要注意的是,因为 jqGrid 会对表格的 DOM 结构进行修改,所以绑定事件时需要使用 $(this) 而非常规的选择器。 以上代码就可以实现在 jqGrid添加删除按钮了。如果需要修改按钮样式,可以在 formatter 函数中调整 HTML 字符串;如果需要添加更多的操作按钮,可在 formatter 和 gridComplete 中添加对应的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值