jqGrid之自定义下拉框

浅浅的花香味﹌ 2022-07-14 00:17 466阅读 0赞

目的：用户表中的负责人，做成下拉框模式，下拉框的选项为负责人中的数据。

![Center][]

![Center 1][]

1.首先js获取负责人数据（数组格式）

var g_ary=[];
      var g_fpid=null;
      $(function(){
        $.ajax({
           type: "get",
           dataType: "json",
           url: '${path}/sys/listBackUserAjaxPCfor',
           success: function (data) {
    		   if(data.code==1){
    		     for(var i=0;i<data.rows.length;i++){
    		     g_ary.push({"key":data.rows[i].fid,"value":data.rows[i].fcnname});
    		     }
    		    }
         }
    });

2.初始化用户列表中的负责人数据。

{
    						name : 'fpid',
    						index : 'fpid',
    						editable: true,
    			        	        edittype : "select",              //编辑格式设为下拉框
    						editoptions :{value :"0:未知"},   //设置下拉选项
    						formatter:function(cellvalue){    //将数字转化为text文本供使用者观看
    							g_fpid=cellvalue;
    							var k=null;
    							for(var i=0;i<g_ary.length;i++){
    								if(g_ary[i].key==cellvalue){
    									k=g_ary[i].value;
    								}
    							}
    							if(k!=null){
    								return k;
    							}else{
    								return "未知";
    							}
    						},
    						formoptions:{
    						rowpos:4,
    						colpos:2
    						}
    					},

3.初始化负责人下拉框。

function style_edit_form(form) {
                            //获取所选行负责人值
                              var value=jQuery(grid_selector).jqGrid('getRowData',jQuery(grid_selector).jqGrid('getGridParam','selarrrow')[0]).fpid;
    				var fpid=null;
    			    for(var i=0;i<g_ary.length;i++){
    			    	$("<option value='"+ g_ary[i].key +"'>"+ g_ary[i].value +"</option>").appendTo($('#fpid'));
                                         //根据值获取显示文本
                                         if(value==g_ary[i].value){
    			    		fpid=g_ary[i].key;
    			    		
    			    	}
                                   //构造下拉框
                                 form.find('input[name=fpid]').append("<option value='"+ g_ary[i].key +"'>"+ g_ary[i].value +"</option>");
    				}
                                 //设置显示文本
                              $('#fpid').val(fpid);
    				
    			}

4.结果展示：

![Center 2][]

收工。

[Center]: /images/20220714/e8752271c61a4c5b906277d30b1b96e9.png
[Center 1]: /images/20220714/bbbcbe9758434e1c86bad288ace40f43.png
[Center 2]: /images/20220714/3b58060232a147b48d2ebbd0ab914804.png

发表评论取消回复

表情：

评论列表（有 0 条评论，466人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序自定义下拉框

自定义select组件文件 select.wxml <view class="page"> <view class="selectBox" >

喜欢ヅ旅行/ 2022年11月24日 14:27/ 0 赞/ 190 阅读

相关 CSS自定义三级菜单下拉框

CSS部分 /分类样式/ / 清楚浮动，使div盒子能被撑起来 / .clearfix:after { content:

拼搏现实的明天。/ 2022年09月10日 13:17/ 0 赞/ 181 阅读

相关 Struts2 自定义下拉框标签Tag

自定义标签主要包括三个步骤： 1、编写java类，继承TagSupport类； 2、创建tld文件，影射标签名和标签的java类； 3、jsp页面引入tld

朴灿烈づ我的快乐病毒、/ 2022年08月20日 10:19/ 0 赞/ 188 阅读

相关【JqGrid】jqGrid动态填充select下拉框的选项值

function gettypes(){ //动态生成select内容 var str=""; $.ajax({

本是古典何须时尚/ 2022年07月14日 04:53/ 0 赞/ 147 阅读

相关 jqGrid之自定义下拉框

目的：用户表中的负责人，做成下拉框模式，下拉框的选项为负责人中的数据。 ![Center][] ![Center 1][] 1.首先js获取负责人数据（数

浅浅的花香味﹌/ 2022年07月14日 00:17/ 0 赞/ 467 阅读

相关 android Spinner自定义下拉框

Spinner下拉框在android中有2种绑定方式 1.通过在string.xml中配置 array 的item 去实现（缺点：下拉框中的内容是写死的） <arr

喜欢ヅ旅行/ 2022年07月13日 06:51/ 0 赞/ 267 阅读

相关自定义组合控件：下拉选择框

Spinner 自定义组合控件之下拉选择框 ![SouthEast][] 项目概述下拉选择框主要是通过在EditText 下用PopupWindow 动态显示L

素颜马尾好姑娘i/ 2022年07月12日 18:09/ 0 赞/ 258 阅读

相关简单的自定义select 下拉框，兼容IE

IE浏览器下的select 实在是各种…… 不好看……，可是项目要求至少兼容IE11 ，为了长得好看些，只能手动去编辑一个类似 select 的存在了，测试过IE9 以上

男娘i/ 2022年05月19日 10:48/ 0 赞/ 204 阅读

相关 jQuery 自定义下拉列表框

在上一篇《[单选框/复选框美化][Link 1]》中，使用到了关键先生 <label>，但是很不幸运，在下拉列表框(<select>)中，<label>并不能通过指向来展开选项

深碍√TFBOYSˉ_/ 2022年05月09日 12:03/ 0 赞/ 258 阅读

相关 css自定义下拉框样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbWlu

我会带着你远行/ 2021年07月26日 12:06/ 0 赞/ 829 阅读