jqGrid的。当用户点击添加按钮时如何显示单独的页面?

时间:2012-07-13 07:31:06

标签: c# jquery asp.net-mvc jquery-ui

对于MVC,jQuery和jqGrid,我是非常新手。我被困在最近两天找到解决方案,当用户点击添加按钮时如何重定向到另一个页面。我还需要在编辑按钮上执行相同操作,但在此之前我需要调用javascript函数来检查是否可以编辑所请求的行。

非常感谢任何帮助。

这是我用来创建jqGrid的代码

var jqDataUrl = "Account/LoadBaseData";
        $(document).ready(function () {
            // Set up the jquery grid
            $("#ListTable").jqGrid({
                // Ajax related configurations
                url: jqDataUrl,
                datatype: "json",
                mtype: "POST",
                // Specify the column names
                colNames: ["Bank","Account No","Account Name"],
                // Configure the columns
                colModel: [ { name: "BankReference", index: "BankReference", width: 40, align: "left"}, { name: "AccountNo", index: "AccountNo", width: 40, align: "left"}, { name: "AccountName", index: "AccountName", width: 40, align: "left"}],
                // Grid total width and height
                width: 850,
                height: 400,
                // Paging
                toppager: true,
                pager: $("#ListTablePager"),
                rowNum: 14,
                viewrecords: true, // Specify if "total number of records" is displayed
                // Grid caption
                caption: "BankAccount List",
                editurl: "/GridDemo/GridSave",
            }).navGrid("#ListTablePager",
            { refresh: true, add: true, edit: true, del: true},
                { }, // settings for edit
                {}, // settings for add
                {}, // settings for delete
                {sopt: ["cn"]}  
            );


        });

提前感谢你。

1 个答案:

答案 0 :(得分:2)

jqgrid附带的添加,编辑按钮用于通过内联/表单添加/编辑记录。在你的情况下,你想根据一些条件点击添加/编辑按钮进行重定向,所以我建议使用自定义按钮,这很容易。

$("#ListTable").jqGrid({
  ...
})
.navGrid("#ListTablePager", {edit:false, add:false, del:false,search:false })
.navButtonAdd("#ListTablePager", { // custom add button
   caption:"Add",  
   buttonicon:"ui-icon-add", 
   onClickButton: function(){ 
     var grid = $("#grid_name"); // ur jqgrid
     var rowid = grid.jqGrid('getGridParam', 'selrow'); // get the selected rowid

     // u can get the cell value of the row by 
     // grid.jqGrid('getCell', rowid, 'rowName');

     if(your condition)
        window.location = ...
   }, 
   position:"last"
})
.navButtonAdd('#ListTablePager',{ // custom edit button
   caption:"Edit", 
   buttonicon:"ui-icon-edit", 
   onClickButton: function(){ 
      ...
   }, 
   position:"last"
});

我不明白请求的行是否可以编辑是什么意思您可以通过

获取onClickButton事件中当前选定的行
var grid = $("#grid_name");

var rowid = grid.jqGrid('getGridParam', 'selrow');

您可以通过

获取所选行的特定单元格值
grid.jqGrid('getCell', rowid, 'rowName');

因此,基于此,您可以轻松构建条件并设置window.location以进行重定向。