jqgrid – 扩展addRowData
感谢Oleg，我有解决方案在网格中的任何位置添加一行。 但我想要这个function
-
inlineNav有"Add"链接时 - 但是，当我点击jqgrid
caption– 我的JQGRID
可能吗？
HTML
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" } }); });
如何理解您希望将事件处理程序绑定到网格标题上的问题。 例如， 这里描述了网格元素的结构。 因此，您可以通过以下选择器选择网格捕获
#gview_myjqgrid>div.ui-jqgrid-titlebar
并绑定您需要的任何事件处理程序。 例如
$('#gview_' + $.jgrid.jqID($grid[0].id) + '>div.ui-jqgrid-titlebar').click(function () { alert("The caption (the titlebar) is clicked"); });
不过，我不建议你在点击捕获标题时实现添加新行。 问题是操作系统和不同软件中使用的许多现代GUI的function是标准的用户界面 。 因此，用户不需要研究用户需要使用的每个新程序。 它为培训节省了大量资金，并允许在购买和下载互联网后立即使用程序。 因此，如果您有客户的此类要求，您可以再次与客户讨论要求，并建议在捕获中直接插入添加按钮。 它将允许新用户在没有任何培训的情况下实现function。