使用edittype select和multiple true，选择框不加载数据 [英] With edittype select and multiple true, select box is not loading data

查看：15
本文介绍了使用edittype select和multiple true，选择框不加载数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在 jqGrid 中有选择框并使用 dataUrl 加载数据 m.一切正常，但是当我将 multiple 设置为 true 时，数据不会显示在网格中，而是在控制台中打印数据.谷歌了很多，但找不到解决方案.

$(document).ready(function () {var lastsel;变种跳过= 0；jQuery("#list").jqGrid({url: 'SomeActionClass.do?option=LOAD',数据类型:json"，colNames:[]，col型号:[{名称:'generalised_skill_id'，索引:'generalised_skill_id'，宽度:120，表单选项:{ rowpos:2，colpos:1 }，可真，编辑类型:选择"，编辑选项:{数据事件:[{类型:'改变'，fn:函数(e){var 值 = $(this).val();如果(值==创建新"){添加技能(值)；}}}],dataUrl: 'PopulatePrimarySkillData.do?nd=' + Math.random()}},{名称:'primary_skill_ids'，索引:'primary_skill_ids'，宽度:120，formoptions: { rowpos: 2, colpos: 2 },可真，编辑规则:{必需:真}，编辑类型:选择"，编辑选项:{数据事件:[{类型:'改变'，fn:函数(e){var 值 = $(this).val();如果(值==创建新"){添加技能(值)；}}}],值:"，倍数:真，大小:3，dataUrl: 'PopulatePrimarySkillData.do?nd=' + Math.random()}},],行号:25，行列表:[25、50、75、100]、寻呼机:'#pager'，行总数:10000，排序名称:'rgs_id'，观看记录:真实，身高:600，排序顺序:asc"，多选:真，mtype:发布"，网格视图:是的，忽略大小写:真，加载一次:真，加载完成:函数(){$('#list').setGridParam({ datatype: "json" });$('#list').trigger("filterToolbar");$('#list').trigger("reloadGrid");},ondblClickRow: 函数 (id) {if (id && id !== lastsel) {数据 = jQuery('#list').getRowData(id);var str = 数据['状态'];if (str == "已完成" || str == "已取消") {alert('已完成和已取消的需求无法编辑');} 别的 {jQuery('#list').jqGrid('restoreRow', lastsel);jQuery('#list').jqGrid('editRow', id, true, pickdates);lastsel = id;}}},editurl: 'SomeActionClass.do?option=EDITorADD'});});

对于通用技能，它加载选择框，但对于主要技能，它不加载任何内容.但是，如果我从主要技能中删除 multiple:true 然后它会加载数据.

任何帮助将不胜感激.

以下是我的 PopulatePrimarySkillData 类.

//在这个函数中写了从数据库中获取所有技能的查询.ArrayList primarySkillList = fetchPrimarySkills();StringBuilder htmlSelectString = new StringBuilder("<select>");for (int i = 0; i < primarySkillList.size(); i++) {SkillsetBean sb = (SkillsetBean) primarySkillList.get(i);htmlSelectString.append("<选项值='");htmlSelectString.append(sb.getPrimarySkillId());htmlSelectString.append("'>");htmlSelectString.append(sb.getPrimarySkillDesc());htmlSelectString.append("</option>");}htmlSelectString.append("<option value='CreateNew'>新建</option>");htmlSelectString.append("</select>");PrintWriter out = response.getWriter();System.out.println("SELECT 字符串是:"+ htmlSelectString.toString());out.println(htmlSelectString.toString());返回空值；

此函数在控制台中打印以下结果.

 <选择><option value='1'>.Net</option><option value='2'>应用打包</option><选项值='3'>BOXI</option><option value='4'>业务分析师</option><选项值='5'>C++</option><选项值='6'>CNG</option><选项值='7'>DB2</option><option value='8'>Flash</option><option value='9'>IIS Admin</option><选项值='10'>Informatica</option><选项值='11'>Java/J2EE</option><option value='12'>Java Flex</option><option value='13'>MS Access</option><option value='14'>主机</option><选项值='15'>NAT/ADABAS</option><option value='16'>Oracle</option><option value='17'>Oracle DBA</option><option value='18'>其他</option></选择>

我认为在服务器端，当我删除multiple:true"数据加载时没有问题.

这是示例 JSON 数据.我希望这会有所帮助.

{"id":"166","cell":["Business Analyst","BOXI,C++"]}{"id":"167","cell":["C++",".Net,C++"]}{"id":"168","cell":[".Net",".Net,CNG"]}{"id":"169","cell":["Business Analyst","Appl Packaging,Business Analyst"]}{"id":"170","cell":["Business Analyst,C++","CICS,Cobol"]}{"id":"171","cell":[,"Appl Packaging",".Net,Business Analyst"]}{"id":"172","cell":["CNG","BOXI,Appl 包装"]}{"id":"173","cell":["Business Analyst","Business Analyst,BOXI"]}

解决方案

你遇到了我在 ，但它使用了固定的jquery.jqGrid.src.js).

此外，我在评论中写道，尝试生成在 dataUrl 中使用的唯一 URL 与

dataUrl: 'PopulatePrimarySkillData.do?nd=' + Math.random()

生成一个类似的网址

PopulatePrimarySkillData.do?nd=0.30184902572188804

如果您将使用 dataUrl: 'PopulatePrimarySkillData.do 并将使用附加参数 ajaxSelectOptions: { cache: false } dataUrl 这将使用起来会很独特像

PopulatePrimarySkillData.do?_=1312564872215PopulatePrimarySkillData.do?_=1312564872217PopulatePrimarySkillData.do?_=1312564891288...

I have select box in jqGrid and to load data m using dataUrl. Everything is working fine but when I put multiple as true then data is not getting displayed in the grid but in the console its printing the data. Googled a lot but couldn't find solution. 

$(document).ready(function () {
    var lastsel;
    var skip = 0;
    jQuery("#list").jqGrid({
        url: 'SomeActionClass.do?option=LOAD',
        datatype: "json",
        colNames: [],
        colModel: [
            { name: 'generalised_skill_id', index: 'generalised_skill_id',
                width: 120, formoptions: { rowpos: 2, colpos: 1 },
                editable: true, edittype: "select",
                editoptions: {
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
                                var Value = $(this).val();
                                if (Value == "CreateNew") {
                                    addSkill(Value);
                                }
                            }
                        }],
                    dataUrl: 'PopulatePrimarySkillData.do?nd=' + Math.random()
                }
            },
            { name: 'primary_skill_ids', index: 'primary_skill_ids', width: 120,
                formoptions: { rowpos: 2, colpos: 2 },
                editable: true, editrules: { required: true }, edittype: "select",
                editoptions: {
                    dataEvents: [
                        {
                            type: 'change',
                            fn: function (e) {
                                var Value = $(this).val();
                                if (Value == "CreateNew") {
                                    addSkill(Value);
                                }
                            }
                        }],
                        value: "", multiple: true, size: 3,
                    dataUrl: 'PopulatePrimarySkillData.do?nd=' + Math.random()
                }
            },
        ],
        rowNum: 25,
        rowList: [25, 50, 75, 100],
        pager: '#pager',
        rowTotal: 10000,
        sortname: 'rgs_id',
        viewrecords: true,
        height: 600,
        sortorder: "asc",
        multiselect: true,
        mtype: "POST",
        gridview: true,
        ignoreCase: true,
        loadonce: true,
        loadComplete: function () {
            $('#list').setGridParam({ datatype: "json" });
            $('#list').trigger("filterToolbar");
            $('#list').trigger("reloadGrid");
        },
        ondblClickRow: function (id) {
            if (id && id !== lastsel) {
                data = jQuery('#list').getRowData(id);
                var str = data['status'];
                if (str == "Fulfilled" || str == "Canceled") {
                    alert('Fulfilled and Cancelled demands can not be edited');
                } else {
                    jQuery('#list').jqGrid('restoreRow', lastsel);
                    jQuery('#list').jqGrid('editRow', id, true, pickdates);
                    lastsel = id;
                }
            }
        },
        editurl: 'SomeActionClass.do?option=EDITorADD'
    });
});

For generalised skill its loading the select box but for primary skill its not loading anything. However if I remove multiple:true from primary skill then its loading the data.

Any help would be greatly appreciated.

Following is my PopulatePrimarySkillData class.

    // In this function query to fetch all the skills from database is written.
    ArrayList primarySkillList = fetchPrimarySkills();
    StringBuilder htmlSelectString = new StringBuilder("<select> ");
    for (int i = 0; i < primarySkillList.size(); i++) {
        SkillsetBean sb = (SkillsetBean) primarySkillList.get(i);
        htmlSelectString.append("<option value='");
        htmlSelectString.append(sb.getPrimarySkillId());
        htmlSelectString.append("'>");
        htmlSelectString.append(sb.getPrimarySkillDesc());
        htmlSelectString.append("</option>");
    }
    htmlSelectString
            .append("<option value='CreateNew'>Create New</option> ");
    htmlSelectString.append("</select> ");
    PrintWriter out = response.getWriter();
    System.out.println("The SELECT String is : "
            + htmlSelectString.toString());
    out.println(htmlSelectString.toString());
    return null;

This Function prints following result in the console.

 <select> <option value='1'>.Net</option>
<option value='2'>Appl packaging</option>
<option value='3'>BOXI</option>
<option value='4'>Business Analyst</option>
<option value='5'>C++</option>
<option value='6'>CNG</option>
<option value='7'>DB2</option>
<option value='8'>Flash</option>
<option value='9'>IIS Admin</option>
<option value='10'>Informatica</option>
<option value='11'>Java / J2EE</option>
<option value='12'>Java Flex</option>
<option value='13'>MS Access</option>
<option value='14'>Mainframe</option>
<option value='15'>NAT/ADABAS</option>
<option value='16'>Oracle</option>
<option value='17'>Oracle DBA</option>
<option value='18'>Others</option>
</select>

I think on server side there is no problem cause when I remove "multiple:true" data is getting loaded.

Here is the sample JSON data. I hope this is helpfull.

{"id":"166","cell":["Business Analyst","BOXI,C++"]}
{"id":"167","cell":["C++",".Net,C++"]}
{"id":"168","cell":[".Net",".Net,CNG"]}
{"id":"169","cell":["Business Analyst","Appl packaging,Business Analyst"]}
{"id":"170","cell":["Business Analyst,C++","CICS,Cobol"]}
{"id":"171","cell":[,"Appl packaging",".Net,Business Analyst"]}
{"id":"172","cell":["CNG","BOXI,Appl packaging"]}
{"id":"173","cell":["Business Analyst","Business Analyst,BOXI"]}

解决方案

You have a part of problems (jqGrid bugs) which I described in the answer and which I posted as the bug report to the developer of jqGrid. The bugs are still not fixed so you my attempts to reproduces your problem in Internet Explorer the demo:

I used IE9 for the test. If you fix the line 8217 of the jquery.jqGrid.src.js (version 4.1.2) from

if(cm[i].edittype == "select" && cm[i].editoptions.multiple===true && $.browser.msie) {

to

if(cm[i].edittype === "select" && typeof(cm[i].editoptions)!=="undefined" && cm[i].editoptions.multiple===true && typeof(cm[i].editoptions.dataUrl)==="undefined" && $.browser.msie) {

the problem will be fixed and you will have

(See the same demo, but which use the fixed jquery.jqGrid.src.js).

Moreover I wrote you in the comment that the attempt generate unique URL used in dataUrl with

dataUrl: 'PopulatePrimarySkillData.do?nd=' + Math.random()

generate one url like

PopulatePrimarySkillData.do?nd=0.30184902572188804

If you would use dataUrl: 'PopulatePrimarySkillData.do and will use additional parameter ajaxSelectOptions: { cache: false } the dataUrl which will be used will be really unique like

PopulatePrimarySkillData.do?_=1312564872215
PopulatePrimarySkillData.do?_=1312564872217 
PopulatePrimarySkillData.do?_=1312564891288
...

这篇关于使用edittype select和multiple true，选择框不加载数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆