jqgrid设置列为下拉框

最新推荐文章于 2022-05-13 09:07:16 发布

sning999

最新推荐文章于 2022-05-13 09:07:16 发布

阅读量1.2w

点赞数 1

分类专栏： jqgrid 文章标签： jqgrid

本文链接：https://blog.youkuaiyun.com/u012724595/article/details/74918180

版权

jqgrid 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了三种在jqgrid中设置下拉框的方法：字符串、对象和动态获取数据。动态获取数据时，需设置editoptions的dataUrl参数，返回值包含HTML select标签。编辑选项还可设置多选、size等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有三种方式设置下拉框：

法一：字符串

{name:'trackerStatus', index:'trackerStatus', editable: true, edittype:'select', editoptions: {value: "1:在用; 2:空闲; 3:故障" }},

法二：对象

{name:'trackerStatus', index:'trackerStatus', editable: true, edittype:'select', editoptions: {value: {1:'在用', 2:'空闲', 3:'故障'}}},

注意，法一和法二中都是：前面是值，后面是显示值。

法三：动态获取数据

为editoptions设置dataUrl参数。意思就是select的值，是通过一个URL来获取的，比如一个Ajax请求的返回值。

特别需要注意的是，在这种情况下，URL的返回值必须是包括select以及option这些HTML标签的。

就像这样：<select><option value="1">One</option><option value="2">Two</option></select>.这种情况下，

还可以在editoptions中设置是否允许多选，size等等。

例如：

{name:'groupPurchaseContractNum',index:'groupPurchaseContractNum', width:60, editable:true, edittype:'select', 
editoptions:{value:getGroupContractNum()}},

实现getGroupContractNum()函数：

function getGroupContractNum(){
			var GroupContractNum = "";
			var i;
			$.ajax({
				type : "post",
				async : false,
				url : "goodsGroupContract_queryGroupPurchaseNum.do",
				success : function(result){
					var result = eval('('+ result +')');
					for(i = 0; i < result.length; i++){
				    	if(i != result.length - 1){
				    		GroupContractNum += result[i].purchaseNum + ":" + result[i].purchaseNum + ";";
				    	}else{
				    		GroupContractNum += result[i].purchaseNum + ":" + result[i].purchaseNum;
				    	}
					}   
				}
			});
			return GroupContractNum;		//必须有此返回值
		}

或者：在弹出框中下拉选择数据。例如：

<div id="bindContractDialog" title="绑定合同号" style="display:none;">
							 	    <table class="exhibit_table">  
									    <tr>  
									        <td style="width:80px; padding:10px;" align="right">大宗物资网合同号</td>  
									        <td>
									        	<select id="DzContractNum" name="dzContractNum" style="width:163px;">
													<!--<option value ="volvo">终端一</option>
													<option value ="saab">终端二</option>
													<option value="opel">终端三</option>
													<option value="audi">终端四</option>
													<option value="audi2">终端五</option>
												--></select>
									        </td>  
									    </tr>  
									    <tr>  
									        <td style="width:80px; padding:10px;"  align="right">集团合同库合同号</td>  
									        <td>
									        	<select id="GroupContractNum" name="groupContractNum" style="width:163px;">
													<!--<option value ="volvo">终端一</option>
													<option value ="saab">终端二</option>
													<option value="opel">终端三</option>
													<option value="audi">终端四</option>
													<option value="audi2">终端五</option>
												--></select>
									        </td>  
									    </tr>  
									</table> 
						 		</div>

$.ajax({
async:false,
cache:true,
type: "POST",  
url: "goodsDzContract_queryDzPurchaseNum.do",
success: function(result){
var result = eval('('+ result +')');
if(result != undefined && result.length > 0){
for ( var i = 0; i < result.length; i++) {
var opt = "<option value='" + result[i].purchaseNum + "'>" + result[i].purchaseNum + "</option>";  
$("#DzContractNum").append(opt);
} 
}
},  
error: function() {  
alert("获取大宗物资网合同号失败")  
}  
});