从jqrid4.6升级到4.13.5时，在创建具有唯一值的动态下拉列表时面临问题.下拉布局受到干扰 [英] While upgrading from jqrid4.6 to 4.13.5 facing issue in creating a dynamic dropdown with Unique values.dropdown layout get disturbed
问题描述
尝试创建演示以显示Field-source(客户端)的动态下拉列表，但数据返回null.
Trying to create a demo to show dynamic dropdown for Field-source, client but data is returning null.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
var columnNameArrayForColumnFilter=["source","name"];
$(function () {
"use strict";
var mydata = [
{id:"1", invdate:"720:0:0",name:"test", source:"note1", amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2", invdate:"34:09:0",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3", invdate:"0:0:0",name:"test3", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4", invdate:"90:08:8",name:"test4", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5", invdate:"09:34:2",name:"test4", source:"note3", amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6", invdate:"80:12:02",name:"test6", source:"note3", amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7", invdate:"80:12:01",name:"test7", source:"note2", amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8", invdate:"112:23:6",name:"test2", source:"note2", amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9", invdate:"80:12:1 ",name:"test9", source:"note1", amount:"400.00",tax:"30.00",total:"430.00"},
{id:"10",invdate:"112:34:2",name:"test1",source:"note3",amount:"500.00",tax:"30.00",total:"530.00"},
{id:"11",invdate:"114:23:2",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"},
{id:"13",invdate:"80:12:4 ",name:"test11",source:"note2",amount:"500.00",tax:"30.00",total:"530.00"},
{id:"14",invdate:"0:1:0",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"} ,
{id:"15",invdate:"80:12:3",name:"test11",source:"note12",amount:"500.00",tax:"30.00",total:"530.00"}
];
$("#grid").jqGrid({
data: mydata,
colNames:['Inv No','Duration', 'Client', 'Amount','Tax','Total','source'],
colModel:[
{name:'id',index:'id', search:false,width:65, sorttype: 'int'},
{name:'invdate',index:'invdate', width:120, align:'center', sorttype:'datetime', datefmt:'H:i:s',searchoptions: { sopt:['inbetween','eq','lt','le','gt','ge'] }},
{name:'name',index:'name', width:90,search:true,},
{name:'amount',index:'amount', width:70, formatter:'number', align:"right",search:false,},
{name:'tax',index:'tax', width:60, formatter:'number', align:"right",search:false,},
{name:'total',index:'total', width:60, formatter:'number',align:"right",search:false,},
{name:'source',index:'source', width:100, search:true,}
],
pager: true,
autoencode: true,
viewrecords: true,
rowNum: 10,
rowList: [5, 10, 20, "10000:All" ],
caption: "Demonstration custom searching operation (Duration Range)",
customSortOperations: {
inbetween: {
operand: "inbetween",
text: "in between",
filter: function (options) {
}
}
}
}).jqGrid("filterToolbar",
{stringResult: true, searchOnEnter: true, searchOperators : true});
applyColumnFilterOnGrid(columnNameArrayForColumnFilter,'grid');
});
function applyColumnFilterOnGrid(columnNameArrayForColumnFilterInGrid)
{
for(var i=0;i<columnNameArrayForColumnFilterInGrid.length;i++)
{
setSearchSelect.call("#grid",columnNameArrayForColumnFilterInGrid[i]);
}
}
// this function return unique value for column filter on grid
var getUniqueNames = function(columnName) {
var data = $('#grid').jqGrid('getGridParam', 'data');
var uniqueTexts = [], text, textsMap = {}, i;
for (i = 0; i < data.length; i++) {
text = data[i][columnName];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
}
// this method add All value in column filter values and return value map
var buildSearchSelect = function(uniqueNames) {
var values=":All";
$.each (uniqueNames, function() {
values += "," + this + ":" + this;
});
return values;
};
// this function is create drop down for column filter functionlity on grid and set values
var setSearchSelect = function(columnName) {
$("#grid").jqGrid("setColProp", columnName,
{
stype:"select",
searchoptions: {
value:buildSearchSelect(getUniqueNames.call("#grid",columnName)),
sopt:["eq"]
}
}
);
};
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<!--<link rel="stylesheet" href="../jqGrid/css/ui.jqgrid.css">-->
<link rel="stylesheet" href="http://www.ok-soft-gmbh.com/jqGrid/OK/ui.jqgrid.css">
<html lang="en">
<head>
</head>
<body>
<div id="outerDiv" style="margin:5px;">
<table id="grid"></table>
</div>
</body>
</html>
当我尝试从4.6升级到4.13.5时，.我现有的动态下拉列表的唯一值会受到干扰.
When I try to upgrade from 4.6 to 4.13.5 .. my existing dynamic dropdown unique values get disturbed.
推荐答案
当前代码有一些简单的错误，例如在getUniqueNames和setSearchSelect内使用$("grid")而不是$("#grid")并创建filterToolbar在用data填充searchoptions.value之前:在filterToolbar之后而不是filterToolbar之前调用applyColumnFilterOnGrid.
The current code has some simple errors like the usage of $("grid") instead of $("#grid") inside of getUniqueNames and setSearchSelect and creating filterToolbar before filling searchoptions.value with the data: you call applyColumnFilterOnGrid after filterToolbar instead of before filterToolbar.
下一个问题存在于buildSearchSelect中，我最初在旧答案中发布了该问题.您更改了行
The next problem exists in the buildSearchSelect, which I published originally in the old answer. You changed the line
values += ";" + this + ":" + this;
到
values += "," + this + ":" + this;
这是错误的.应该使用;而不是,作为分隔符(请参见替换为";"，则该问题将得到解决.通常，您可以使用,代替;作为value中的分隔符，但是您应该通过使用delimiter: ","选项将其通知给jqGrid:
which is wrong. One should use ; instead of , as the separator (see the documentation of jqGrid 4.6). If you replace "," to ";" then the problem will be solved. In general you can use , instead of ; as the separator in the value, but you should inform jqGrid about that by usage delimiter: "," option:
var setSearchSelect = function(columnName) {
$("#grid").jqGrid("setColProp", columnName,
{
stype:"select",
searchoptions: {
delimiter: ",",
value:buildSearchSelect(getUniqueNames.call("#grid",columnName)),
sopt:["eq"]
}
}
);
};
这篇关于从jqrid4.6升级到4.13.5时，在创建具有唯一值的动态下拉列表时面临问题.下拉布局受到干扰的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
