jqgrid增加删除按钮和时间控件

112 篇文章 0 订阅
78 篇文章 0 订阅

 mygrid = $("#list").jqGrid({
            width: 800,
            height: 450,
            url: 'LoadActionSubmit/',
            datatype: 'json',
            mtype: 'POST',
            pager: jQuery('#pager'),
            rowNum: 20,
            rowList: [20, 40, 60, 80],
            sortname: 'Id',
            sortorder: "desc",
            viewrecords: true,
            imgpath: '/scripts/themes/steel/images',
            caption: '查询条件:',
            recordtext: '条记录',
            sortorder: "desc",
            loadtext: 'loading....',
            colNames: ['网吧名称', '活动日期', '活动开始时间', '活动结束时间', '包机数量', '活动费用', '删除'],

            colModel: [{ name: 'netbarid', index: 'NETBARNAME', width: 160, align: 'center' },
                                        { name: 'barname', index: 'ACTIONDATE', width: 160, align: 'center', sorttype: "date" },
                                        { name: 'province', index: 'ACTIONBEGINTIME', width: 160, align: 'center' },
                                        { name: 'city', index: 'ACTIONENDTIME', width: 160, align: 'center' },
                                        { name: 'county', index: 'FLIGHTSNUMBER', width: 160, align: 'center' },
                                        { name: 'applicant', index: 'ACTIONFEES', width: 160, align: 'center' },
                                        { name: 'act', index: 'act', width: 160, align: 'center', sortable: false}],
            loadComplete: function() {
                //                var sumrecords = $("#list").getGridParam("records");

                //                if (sumrecords != null) {
                //                    $('#totalsum').text(sumrecords);
                //                }
                var ids = jQuery("#list").getDataIDs();

                for (var i = 0; i < ids.length; i++) {
                    var cl = ids[i];
                    se = "<input style='height:22px;width:20px;' type='button' value='S' οnclick=jQuery('#list').saveRow(" + cl + "); />";
                    var menuDate = "对字段:的处理";
                    $("#list").setRowData(cl, { act: se});
                   
                }

            },
            onSelectRow: function(id) {
                if (id && id !== lastsel3) {
                    jQuery('#list').restoreRow(lastsel3);
                    jQuery('#list').editRow(id, true, pickdates);
                    lastsel3 = id;
                }
            }

        });


    });
    function pickdates(id) { jQuery("#" + id + "_sdate", "#rowed6").datepicker({ dateFormat: "yy-mm-dd" }); }

 

 

  public ActionResult LoadActionSubmit(WModels.ActionCondition condition)
        {
            List<WModels.TgsActionSubmit> questions = new List<WModels.TgsActionSubmit>() {
                new WModels.TgsActionSubmit()
                {
                     NETBARNAME="春心荡漾",
                     ACTIONDATE=DateTime.Parse("2009-2-3"),
                     ACTIONBEGINTIME=DateTime.Parse("2009-2-3"),
                     ACTIONENDTIME=DateTime.Parse("2009-5-1"),  
                     FLIGHTSNUMBER=13,
                     ACTIONFEES=100,
                     act=""

                },
                new WModels.TgsActionSubmit()
                {
                     NETBARNAME="心悦诚服",
                     ACTIONDATE=DateTime.Parse("2009-2-3"),
                     ACTIONBEGINTIME=DateTime.Parse("2009-2-3"),
                     ACTIONENDTIME=DateTime.Parse("2009-5-1"),  
                     FLIGHTSNUMBER=13,
                     ACTIONFEES=100,
                       act=""
                },
                new WModels.TgsActionSubmit()
                {
                     NETBARNAME="春心荡漾",
                     ACTIONDATE=DateTime.Parse("2009-2-3"),
                     ACTIONBEGINTIME=DateTime.Parse("2009-2-3"),
                     ACTIONENDTIME=DateTime.Parse("2009-5-1"),  
                     FLIGHTSNUMBER=13,
                     ACTIONFEES=100,
                     act=""
                }
            };

            var jsonData = new
            {
                rows = (
                    from model in questions
                    select new
                    {
                        cell = new string[]
                        {
                               model.NETBARNAME.ToString(),
                               model.ACTIONDATE.ToString(),
                               model.ACTIONBEGINTIME.ToString(),
                               model.ACTIONENDTIME.ToString(),
                               model.FLIGHTSNUMBER.ToString(),
                               model.ACTIONFEES.ToString(),
                               model.act.ToString()
                        }
                    }).ToArray()
            };

            return Json(jsonData);
       
       
        }

 

 

还是从http://www.trirand.com/blog/?page_id=393/help/loadcompletesetrowdata-elem0-undefined论坛上找到的。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用 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、付费专栏及课程。

余额充值