1

我得到了一个工作 jqGRID,在单元格中有一个下拉菜单。

{ name : 'oid', editrules: {required: true}, index : 'note', sortable : false, editable : true, edittype: 'select', 
                                                        formatter: 'select', 
                                                        editoptions:{
                                                            dataUrl: "http://api.kurse.dailyware.ch/orte/liste",
                                                            buildSelect: function(response){
                                                                var data = typeof response === "string" ?
                                                                            $.parseJSON(response) : response,
                                                                 s = "<select>";
                                                                $.each(data.data.orte, function () {
                                                                    s += '<option value="' + this.oid + '">' + this.name +
                                                                       '</option>';
                                                                })
                                                                return s + "</select>";
                                                            }
                                                            }
                                                        }

它由这个 JSON 源填充:

{
    "header":
    {
        "timestamp": "2015-09-24 03:47:18"
    },
    "data":
    {
        "func": "listview",
        "orte":
        [
            {
                "oid": "1",
                "name": "Buero Gruetter Stooss",
                "strasse": "Muehledorf 30",
                "plz": "5013",
                "ort": "Niedergoesgen"
            },
            {
                "oid": "3",
                "name": "FBS",
                "strasse": "Das ist wahr",
                "plz": "46",
                "ort": "oke"
            },
            {
                "oid": "2",
                "name": "TCS Sicherheitscenter",
                "strasse": "Industrie 17",
                "plz": "8000",
                "ort": "Zuerich"
            }
        ]
    },
    "status": "200"
}

只要我编辑一行,下拉菜单就会出现正确的值。

这是我完整的网格

$.ajax({
                                dataType: "json",
                                url: "http://api.kurse.dailyware.ch/kurse/liste",
                                success: function(data){
                                    jqgrid_data = data.data.kurse
                                    // ----------------------------------------------------------------------------------------------------
                                    console.log('test')
                                    jQuery("#jqgrid").jqGrid({
                                            data : jqgrid_data,
                                            datatype : "local",
                                            height : '250',
                                            colNames : ['ID', 'Datum', 'Zeit', 'Name', 'Inhalt', 'Preis','Teilnehmer','Kursort'],
                                            colModel : [
                                                    { name : 'kid', index : 'kid', key : true, sortable : false, width : '50px' }, 
                                                    { name : 'kursdatum', editrules: {required: true}, index : 'sdate', editable : true, sorttype:"date",unformat: pickDate, width : '100px' }, 
                                                    { name : 'kurszeit', editrules: {required: true}, index : 'tax', editable : true, width : '80px' }, 
                                                    { name : 'kursname', editrules: {required: true}, index : 'name', editable : true }, 
                                                    { name : 'kursinhalt', editrules: {required: true}, index : 'amount', editable : true }, 
                                                    { name : 'kurskosten', editrules: {required: true}, index : 'note', align : "right", sortable : false, editable : true, width : '80px' },
                                                    { name : 'kursteilnehmer', editrules: {required: true}, index : 'kursteilnehmer', align : "right", editable : true, width : '100px' }, 
                                                    { name : 'oid', editrules: {required: true}, index : 'oid', sortable : false, editable : true, edittype: 'select',                               
                                                        editoptions:{
                                                            dataUrl: "http://api.kurse.dailyware.ch/orte/liste",
                                                            buildSelect: function(response){
                                                                var data = typeof response === "string" ?
                                                                            $.parseJSON(response) : response,
                                                                 s = "<select>";
                                                                $.each(data.data.orte, function () {
                                                                    s += '<option value="' + this.oid + '">' + this.name +
                                                                       '</option>';
                                                                })
                                                                return s + "</select>";
                                                            }
                                                        }            
                                                        }],
                                            rowNum : 10,
                                            rowList : [10, 20, 30],
                                            pager : '#pager_jqgrid',
                                            sortname : 'kursdatum',
                                            toolbarfilter: true,
                                            viewrecords : true,
                                            sortorder : "desc",
                                            gridComplete: function(){
                                                var ids = jQuery("#jqgrid").jqGrid('getDataIDs');
                                                for(var i=0;i < ids.length;i++){
                                                    var cl = ids[i];
                                                    be = "<button class='btn btn-xs btn-default btn-quick' title='Edit Row' onclick=\"jQuery('#jqgrid').editRow('"+cl+"');\"><i class='fa fa-pencil'></i></button>"; 
                                                    se = "<button class='btn btn-xs btn-default btn-quick' title='Save Row' onclick=\"jQuery('#jqgrid').saveRow('"+cl+"');\"><i class='fa fa-save'></i></button>";
                                                    ca = "<button class='btn btn-xs btn-default btn-quick' title='Cancel' onclick=\"jQuery('#jqgrid').restoreRow('"+cl+"');\"><i class='fa fa-times'></i></button>";  
                                                    jQuery("#jqgrid").jqGrid('setRowData',ids[i],{act:be+se+ca});
                                                }   
                                            },
                                            editurl : "http://api.kurse.dailyware.ch/kurse/add",
                                            caption : "Kursübersicht",
                                            multiselect : false,
                                            autowidth : false
                                    });

但是有两件事不起作用:

  1. 只要我不编辑该行,该单元格就是空的(不显示任何内容)

  2. 如果我单击编辑,则会显示下拉列表,但不会采用与单元格值对应的默认值。

我该如何解决这两个问题?

问候

4

1 回答 1

2

jqGrid 允许使用editoptionsdataUrlbuildSelect属性而不是属性。因此,您可以很好地使用指向提供所描述 JSON 数据的现有源。您只需要编写将 JSON 数据转换为 HTML 片段的小回调函数valuedataUrlbuildSelect

<select>
    <option value="1">Buero Gruetter Stooss</option>
    <option value="3">FBS</option>
    <option value="2">TCS Sicherheitscenter</option>
</select>

或与您希望在下拉列表中显示的文本更对应的任何其他内容。重要的是要理解buildSelect作为带有一个参数的回调函数,该参数data代表来自服务器的响应dataUrl。回调buildSelect应该解析数据并返回带有所有必需选项的表示字符串。<select>返回的数据应该是字符串,这一点很重要,但是一些更重新发送的版本或 jqGrid 也允许使用 jQuery 包装器来处理相同的数据。

于 2015-09-24T14:12:11.890 回答