1. 程式人生 > >jqGrid之自定義下拉框

jqGrid之自定義下拉框

目的:使用者表中的負責人,做成下拉框模式,下拉框的選項為負責人中的資料。



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.結果展示:

收工。