Question

下面是我的网格..

My Grid Column TestType有一个值列表（比如test1，test2..test10）如何生成这样的添加表单。
Add

任何人都可以对此有所了解吗？非常感谢..

enter image description here

更新： 的 ======

这是我的添加表单应该是这样的 enter image description here

Answer 1

您是否在表单中创建了一个jqgrid？

你已经创建了一个像这样的jqgrid：

jQuery("#list2").jqGrid({
    url:'server.php?q=2',
    datatype: "json",
    colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
    colModel:[
        {name:'id',index:'id', width:55},
        {name:'invdate',index:'invdate', width:90},
        {name:'name',index:'name asc, invdate', width:100},
        {name:'amount',index:'amount', width:80, align:"right"},
        {name:'tax',index:'tax', width:80, align:"right"},      
        {name:'total',index:'total', width:80,align:"right"},       
        {name:'note',index:'note', width:150, sortable:false}       
    ],
    rowNum:10,
    rowList:[10,20,30],
    pager: '#pager2',
    sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

colNames其标题为colModel，PostData包含网格名称和格式，并且标记{{1}}包含用于填充网格的参数，其返回格式为JSON或Xml

您是否在Wiki和Demos中看到了更多内容。

欢迎你。

Answer 2

正如我从您的上述评论中了解到的，您的添加表单需要采用表格格式。

A。简单的方法是网格内联编辑。但我认为它不适合你。如果是的话，

B。执行以下操作：

使用外部添加按钮代替网格的默认添加按钮。单击该按钮时，使用“保存”选项以表格形式打开自定义表单。
单击“保存”按钮，只需从表格中读取所有字段数据。这里有一些小问题。
您可能必须迭代表中的行以插入数据库（这取决于您的数据库设计）。
关于AJAX的成功，您只需使用$('#yourGrid').trigger("reloadGrid");
重新加载网格

这只是一个设计理念。不幸的是我没有你的任何例子:(

如果您需要更多详细信息，请与我们联系。

修改
外部添加按钮：

结果添加表单

Answer 3

一个解决方案可能是使用jqgrid进行'带外'。您可以在jqGrid javascript-object中添加“ onSelectRow ”属性。允许它加载一些其他内容，例如在对话框中。这看起来像这样。

$("#list").jqGrid({
            url:'/path/to/jqgrid/data/',
            datatype: 'json',
            mtype: 'GET',
            colNames:['TestID','ArticleID', 'Color', 'TestType', 'Places Tested', 'Results', 'comments'],
            colModel :[ 
                        {name:'testid', index:'testid', width:35, align:'center', sortable:true}, 
                        {name:'artileid',   index:'articleid',   width:50, align:'left',   sortable:false}, 
                        {name:'color',   index:'color',   width:80, align:'left',   sortable:true}, 
                        {name:'testtype', index:'testtype', width:40, align:'right',  sortable:true}, 
                        {name:'placestested', index:'placestested', width:50, align:'center', sortable:false}, 
                        {name:'results',    index:'results',    width:50, align:'center', sortable:false}, 
                        {name:'comments',   index:'commente',   width:35, align:'center', sortable:false}
                        ],
            pager: '#pager',
            rowNum:15,
            rowList:[15,30,60,120],
            sortname: 'testid',
            sortorder: 'desc',
            viewrecords: true,
            gridview: true,
            emptyrecords: "No Tests in system",
            height: "100%",
            autowidth: true,
            caption: 'Test Details',
            onSelectRow: function(id, status, event){ 
                console.log("jqGrid.onSelectRow called");
                    alert('TODO: add dialog');
                var url = "/new/dialog/server/data/' + id + "/"
                console.log(url);
                window.openDialog( url, id );
                $('tr[id=' + id + ']').removeClass('ui-state-highlight'); // no annoying white row.
            },
            loadComplete: function() {
                   console.log('jqGrid.loadcomplete');
            }
        }); // end jqGrid stanza

尚未完成： 现在你需要做3件事

构建服务器响应：这将响应jqgrid url请求。 '的 /路径/到/的jqGrid /数据/ '

您需要编写javascript' openDialog（url，id）'函数。这应该是jquery-ui dialog的包装函数。

您需要构建另一个服务器响应：它将响应openDialog网址请求。

注意：我建议你使用jqGrid，你会使用jquery-ui对话框。

最后：'只是为了确定'＃1所需的响应将会是这样的。

{ "total": 1, "records": 2, "rows": [ { "cell": [ 1, 398, "red", "unit", "lab", "failed", "failed post progression bla" ], "id": 2 }, { "cell": [ 2,399, "green", "unit", "lab", "passed", "past post progression bla" ], "id": 1 } ], "page": 1 }

如何在jqgrid Add Form中传递动态值

3 个答案: