jqGrid将字段从文本切换为下拉菜单 [英] jqGrid Switch a field to dropdown from text

查看：65 发布时间：2021/5/20 19:21:26 jqgrid

本文介绍了jqGrid将字段从文本切换为下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个jqGrid，其中有一些列，其中的1列是从数据库中填充的dropdownlist(选择).

我想要的是:当即时消息不在带有下拉菜单的editmode列中时，只需要显示必须从查询中获取的文本，而当im处于编辑模式时，它应该显示下拉列表.

完全类似于此处: http://www.trirand.com/blog/jqgrid/jqgrid.html 进入行编辑/输入提示

这是我的网格的代码:

 < script type ="text/javascript">var lastsel;$(document).ready(function(){$ .getJSON('@ Url.Action("ConstructSelect")'，函数(数据){setupGrid(数据);});});函数setupGrid(data){jQuery(document).ready(function(){jQuery(#list").jqGrid({url:'@ Url.Action("GetStoreList")'，数据类型:"json"，mtype:"GET"，colNames:['Butiks kategori'，'Butik Navn'，'By'，'Sælger']，colModel:[{name:'Id'，index:'Id'，width:50}，{名称:'Butiks Kategori'，索引:'StoreId'，宽度:200，edittype:'text'，align:'center'，editable:false}，{名称:'Buttiks Navn'，索引:'StoreName'，宽度:200，edittype:'text'，align:'center'，editable:false}，{名称:国家/地区"，索引:国家/地区"，宽度:80，可排序:true，可true，edittype:"select"，editoptions:{value:data}}]，onSelectRow:函数(id){如果(id&& id！== lastsel){jQuery('#list').jqGrid('restoreRow'，lastsel);jQuery('#list').jqGrid('editRow'，id，true);lastsel = id;}}，editurl:'@ Url.Action("GridSave")'，rowNum:50000，rowList:[5，10，20，50]，传呼机:#page"，sortname:'Id'，sortorder:"desc"，观看记录:是的，高度:"500px"，imgpath:"/scripts/themes/base/images"});jQuery(#list").jqGrid('navGrid'，"#page"，{false，添加:false，del:false});});}</script>

P.S.我一回到家，病假的链接代码就会出现

更新:感谢您的回答，这是jq的新手，所以我经常犯错，但是现在回到我以前的位置，下拉列表中没有数据.我按照您所说的清理了代码，所以现在看起来像这样:

顺便说一句.ConstructSelect返回一个字符串列表

  jQuery(document).ready(function(){jQuery(#list").jqGrid({url:'@ Url.Action("GetStoreList")'，ajaxSelectOptions:{类型:"POST"，数据类型:"json"}，数据类型:"json"，mtype:"GET"，colNames:['Butiks kategori'，'Butik Navn'，'By'，'Sælger']，colModel:[{name:'Kategori'，index:'Kategori'，width:50，key:false}，{name:'Navn'，index:'Navn'，align:'center'，editable:false}，{name:'By'，index:'By'，align:'center'，editable:false}，{name:'Sælger'，index:'Sælger'，editable:true，edittype:"select"，editoptions:{dataUrl:'@ Url.Action("ConstructSelect")'，buildSelect:函数(数据){var response = jQuery.parseJSON(data.responseText);var s ='< select>';;if(response&& response.length){对于(var i = 0，l = response.length; i< l; i ++){var ri = response [i];s + ='< option value ='+ ri +'">'+ ri +'</option>';;}}返回s +</select>";}}}]，onSelectRow:函数(id){如果(id&& id！== lastsel){jQuery('#list').jqGrid('restoreRow'，lastsel);jQuery('#list').jqGrid('editRow'，id，true);lastsel = id;}}，editurl:'@ Url.Action("GridSave")'，rowNum:50000，rowList:[5，10，20，50]，传呼机:#page"，sortname:'Id'，sortorder:"desc"，观看记录:是的，高度:"900px"});jQuery(#list").jqGrid('navGrid'，"#page"，{edit:false，add:false，del:false});});

好的，要使其正常工作，需要进行一些修改:

  var response = typeof(data)===字符串"?jQuery.parseJSON(data.responseText):data;

显然，您必须告诉buildselect您要修改的数据是String

但是我仍然有一个问题，那就是从一开始就没有显示出已经选择了哪个卖家！

好吧，重启后它神秘地起作用了……现在解决了

解决方案

您需要使用的是

  editoptions:{dataUrl:'@ Url.Action("ConstructSelect")'}

代替

  editoptions:{值:数据}

取决于操作 ConstructSelect 的输出格式，您可能需要使用 editoptions 的附加属性 buildSelect .jqGrid期望对 dataUrl 的HTTP'GET'请求的服务器响应将是HTML片段，该片段代表< select> .例如:

 < select>< option value ="de">德国</option>< option value ="us">美国</option></select>

如果服务器返回其他格式的数据，例如JSON数据

  [德国"，美国"]

或

  [{"code":"de"，"display":德国"}，{"code":"us"，"display":美国"}]

您可以编写JavaScript函数，该函数将服务器响应转换为< select> 的HTML片段，并将属性 buildSelect 的值设置为该函数./p>

在参数，以覆盖相应的 ajax 代码>请求.同样，您可以覆盖其他 ajax 参数.例如，您可以使用

  ajaxSelectOptions:{类型:"POST"，数据类型:"json"}

(默认值为 type:"GET" 和 dataType:"html" )

对代码的一些其他小注释:

您不应将 $(document).ready(function(){)放置在另一个 $(document).ready(function(){)内.
您使用'Id'而不是'id'.因此jqGrid 找不到 id 属性.您可以a)重命名'Id'到'id' b)包含附加参数 jsonReader:{id:'Id'} c)包含附加属性键:'Id'列的定义中为true .任何方式都可以解决所描述的问题.
您可以删除默认属性，例如 edittype:'text'， sortable:true 或 editable:false .请参阅 jqGrid文档，其中介绍了所有 colModel 属性.

您应该删除jqGrid的 imgpath 参数.该参数不存在，因为jqGrid的版本很多(请参见http://www.trirand.com/blog/jqgrid/jqgrid.html    go into row editing/input tipyes

here is the code for my grid:
<script type="text/javascript">
    var lastsel;

    $(document).ready(function () {
        $.getJSON('@Url.Action("ConstructSelect")', function (data) {
            setupGrid(data);
        });
    });
    function setupGrid(data) {
        jQuery(document).ready(function () {
            jQuery("#list").jqGrid({

                url: '@Url.Action("GetStoreList")',
                datatype: 'json',
                mtype: 'GET',
                colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],

                colModel: [
                        { name: 'Id', index: 'Id', width: 50 },
                        { name: 'Butiks Kategori', index: 'StoreId', width: 200, edittype: 'text', align: 'center', editable: false },
                        { name: 'Buttiks Navn', index: 'StoreName', width: 200, edittype: 'text', align: 'center', editable: false },
                        { name: 'Country', index: 'Country', width: 80, sortable: true, editable: true, edittype: "select", editoptions: { value: data }}],


                onSelectRow: function (id) {
                    if (id && id !== lastsel) {
                        jQuery('#list').jqGrid('restoreRow', lastsel);
                        jQuery('#list').jqGrid('editRow', id, true);
                        lastsel = id;

                    }
                },
                editurl: '@Url.Action("GridSave")',
                rowNum: 50000,
                rowList: [5, 10, 20, 50],
                pager: '#page',
                sortname: 'Id',
                sortorder: "desc",
                viewrecords: true,
                height: "500px",
                imgpath: '/scripts/themes/base/images'
            });
            jQuery("#list").jqGrid('navGrid', "#page", { edit: false, add: false, del: false });
        });
    }
</script>
P.S. Ill link code as soon as i am back home

UPDATED: Thanks for an answer, im new to jq, so im making alot of mistakes ofc., but now im back to where i was before, the dropdownlist is not populated with data. i cleaned up the code as u said, so it looks like this now:

btw. The ConstructSelect return a list of Strings
jQuery(document).ready(function () {
    jQuery("#list").jqGrid({
        url: '@Url.Action("GetStoreList")',
        ajaxSelectOptions: { type: "POST", dataType: "json" },
        datatype: 'json',
        mtype: 'GET',
        colNames: ['Butiks kategori', 'Butik Navn', 'By', 'Sælger'],
        colModel: [
            { name: 'Kategori', index: 'Kategori', width: 50, key: false},
            { name: 'Navn', index: 'Navn', align: 'center', editable: false },
            { name: 'By', index: 'By', align: 'center', editable: false },
            { name: 'Sælger', index: 'Sælger', editable: true, edittype: "select",
                editoptions: { dataUrl: '@Url.Action("ConstructSelect")',
                buildSelect: function (data) {
                    var response = jQuery.parseJSON(data.responseText);
                    var s = '<select>';
                    if (response && response.length) {
                        for (var i = 0, l = response.length; i < l; i++) {
                            var ri = response[i];
                            s += '<option value="' + ri + '">' + ri + '</option>';
                        }
                    }
                    return s + "</select>";
                }
            }
        }],
        onSelectRow: function (id) {
            if (id && id !== lastsel) {
                jQuery('#list').jqGrid('restoreRow', lastsel);
                jQuery('#list').jqGrid('editRow', id, true);
                lastsel = id;
            }
        },
        editurl: '@Url.Action("GridSave")',
        rowNum: 50000,
        rowList: [5, 10, 20, 50],
        pager: '#page',
        sortname: 'Id',
        sortorder: "desc",
        viewrecords: true,
        height: "900px"
    });
    jQuery("#list").jqGrid('navGrid', "#page", {edit:false, add:false, del:false});
});
Okay, slight modifications was needed to get it working :
var response = typeof(data) === "string" ? jQuery.parseJSON(data.responseText):data;
aparently u have to tell buildselect that the data u want to modify is String

But i still have the problem that it doesnt show from begining which sellers is already selected!

Okay after restart it mysticly worked... it is solved now
 解决方案 
What you need to do is to use
editoptions: { dataUrl: '@Url.Action("ConstructSelect")' }
instead of
editoptions: { value: data }
Depend on the format of the output of the action ConstructSelect you can need to use an additional property buildSelect of the editoptions. jqGrid expected that the server response on the HTTP 'GET' request of dataUrl will be HTML fragment which represent <select>. For example:
<select>
    <option value="de">Germany</option>
    <option value="us">USA</option>
</select>
If the server return other formatted data, like JSON data
["Germany","USA"]
or
[{"code":"de","display":"Germany"},{"code":"us","display":"USA"}]
you can write JavaScript function which convert the server response to the HTML fragment of the <select> and set the value of the property buildSelect to the function.

In the answer you will find an example of the function.

If your action support only HTTP POST and no GET you will have to use ajaxSelectOptions: { type: "POST" } parameter additionally, to overwrite the type of the corresponding ajax requests. In the same way you can overwrite other ajax parameters. For example you can use
ajaxSelectOptions: { type: "POST", dataType: "json"}
(defaults are type : "GET" and dataType: "html")

Some other small remarks to the code:


you should not place $(document).ready(function () { inside of another $(document).ready(function () {.
You use 'Id' instead of 'id'. So jqGrid will not find the id property. You can a) rename 
'Id' to 'id' b) include additional parameter jsonReader: {id: 'Id'} c) include additional property key: true in the definition of the column 'Id'. Any from the ways will solve the described problem.
You can remove default properties like edittype: 'text', sortable: true or editable: false. See jqGrid documentation which describes the default values of all colModel properties.
You should remove imgpath parameter of jqGrid. The parameter is not exist since many many versions of jqGrid (see here).


                        这篇关于jqGrid将字段从文本切换为下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

jqGrid将字段从文本切换为下拉菜单 [英] jqGrid Switch a field to dropdown from text

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录关闭

jqGrid将字段从文本切换为下拉菜单 [英] jqGrid Switch a field to dropdown from text

问题描述

相关文章

其他开发最新文章

热门教程

热门工具

登录 关闭

登录关闭