jqgrid-扩展addRowData [英] jqgrid - extending addRowData

问题描述

感谢Oleg，我有解决方案，可以在网格中的任何位置添加一行.但是我想要这个功能

Thanks to Oleg, I have the solution to adding a row anywhere in the grid. BUT I want this functionality

• 否，如果inlineNav
中有"Add"链接
• 但，当我单击jqgrid caption-MY JQGRID
时

• NOT when there is an "Add" link in the inlineNav
• BUT when I click on the jqgrid caption - MY JQGRID

有可能吗?

HTML

<table id="myjqgrid"></table>
<div id="pager"></div>  

JQGRID

$(document).ready(function () {
    var oldAddRowData = $.fn.jqGrid.addRowData;
    var mydata = [
        { id: "1",  invdate: "2007-10-01", name: "test",   note: "note",   amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "2",  invdate: "2007-10-02", name: "test2",  note: "note2",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "3",  invdate: "2007-09-01", name: "test3",  note: "note3",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
        { id: "4",  invdate: "2007-10-04", name: "test4",  note: "note4",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "5",  invdate: "2007-10-31", name: "test5",  note: "note5",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "6",  invdate: "2007-09-06", name: "test6",  note: "note6",  amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
        { id: "7",  invdate: "2007-10-04", name: "test7",  note: "note7",  amount: "200.00", tax: "10.00", closed: true,  ship_via: "TN", total: "210.00" },
        { id: "8",  invdate: "2007-10-03", name: "test8",  note: "note8",  amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
        { id: "9",  invdate: "2007-09-01", name: "test9",  note: "note9",  amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
        { id: "10", invdate: "2007-09-08", name: "test10", note: "note10", amount: "500.00", tax: "30.00", closed: true,  ship_via: "TN", total: "530.00" },
        { id: "11", invdate: "2007-09-08", name: "test11", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
        { id: "12", invdate: "2007-09-10", name: "test12", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
    ]
    $.jgrid.extend({
        addRowData: function (rowid, rdata, pos, src) {
            if (pos === 'afterSelected' || pos === 'beforeSelected') {
                if (typeof src === 'undefined' && this[0].p.selrow !== null) {
                    src = this[0].p.selrow;
                    pos = (pos === "afterSelected") ? 'after' : 'before';
                } else {
                    pos = (pos === "afterSelected") ? 'last' : 'first';
                }
            }
            return oldAddRowData.call(this, rowid, rdata, pos, src);
        }
    });

    $("#myjqgrid").jqGrid({
        datatype: 'local',
        data: mydata,
        colNames: ['Date', 'Client', 'Amount', 'Tax', 'Total', 'Closed', 'Shipped via', 'Notes'],
        colModel: [
            {name: 'invdate', index: 'invdate', width: 80, align: 'center', editable: true},
            {name: 'name', index: 'name', editable: true, width: 65},
            {name: 'amount', index: 'amount', width: 75},
            {name: 'tax', index: 'tax', width: 52},
            {name: 'total', index: 'total', width: 60},
            {name: 'closed', index: 'closed', width: 70, align: 'center', editable: true},
            {name: 'ship_via', index: 'ship_via', width: 105, align: 'center', editable: true},
            {name: 'note', index: 'note', width: 60, sortable: false, editable: true}
        ],
        rowNum: 10,
        rowList: [5, 10, 20],
        pager: '#pager',
        gridview: true,
        rownumbers: true,
        width: 1020,
        sortable: true,
        sortname: 'invdate',
        viewrecords: true,
        sortorder: 'desc',
        height: '100%',
        caption: 'MY JQGRID',
        editurl: 'clientArray'
   });
   $("#myjqgrid").jqGrid('navGrid', '#pager');            
   $("#myjqgrid").jqGrid('inlineNav', '#pager', {
        edittext: "Edit",
        addtext: "Add",
        savetext: "Save",
        canceltext: "Cancel",
        addParams: { position: "afterSelected" }
   });
});

推荐答案

如何理解问题，您希望将事件处理程序绑定到单击网格标题上.例如在此处中描述了网格元素的结构.因此，您只需通过以下选择器选择对网格的捕获即可

How you understand your question you want to bind event handler to the click on the caption of the grid. The structure of grid elements are described for example here. So you can just select the capture of the grid by the following selector

#gview_myjqgrid>div.ui-jqgrid-titlebar

并绑定您需要的任何事件处理程序.例如

and bind any event handler which you need. For example

$('#gview_' + $.jgrid.jqID($grid[0].id) + '>div.ui-jqgrid-titlebar').click(function () {
    alert("The caption (the titlebar) is clicked");
});

尽管如此，我不建议您通过单击捕获标题来实现添加新行.问题在于，标准用户界面是操作系统和各种软件中使用的许多现代GUI的强大功能.因此，用户无需研究用户需要使用的每个新程序.例如，它可以节省大量培训成本，并且可以在从Internet购买和下载后立即使用程序.因此，如果您对客户有这样的要求，则可以再与客户讨论这些要求，并建议直接在捕获中插入一个添加按钮.它将使新用户无需进行任何培训即可猜测您实施的功能.

Nevertheless I would not recommend you implement adding new row on click on the capture header. The problem is that the power of many modern GUI used in operation system and different software is the standard user interface. So the user don't need to study every new program which the user need to use. It saves much money for the training and allows to use programs immediately after buying and downloading from the internet for example. So if you have such requirements from the customers you can discuss with the customer the requirements one more time and recommend to insert an add button directly in the capture. It will allow new users to guess the functionality with you implement without any training too.

这篇关于jqgrid-扩展addRowData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！