jqgrid 单元格选择器

项目背景：点击单元格编辑，可以弹出选择页面，进行选择，又可以输入用户名，效果如下图所示；

 这里需要设置，列表可以编辑

	{name:"SIGNERNAME", index:"SIGNERNAME", width:150,editable:true,edittype: 'custom',editoptions:{custom_element: myelem,custom_value: myvalue}},

jqgrid初始化增加编辑保存地址

jQuery(grid_selector).jqGrid({
			url : grid_url,
			cellEdit: true,
			cellsubmit : 'remote',
			cellurl : ctx +'/action/cnt/saveSingerInfo',
			multiselect: false,
		    shrinkToFit : true,
			colNames : _colnames,
			colModel : _colmodel, 
			jsonReader : {id :"ID"},
			pager : pager_selector,
			postData : {
				sort : "ID",
				order : "desc"
			},
		});

然后就是编辑前和编辑后页面显示代码

// 用户名称显示
    function myvalue(elem, operation, value) {
        if (operation === 'get') {
            return $(elem).find('input').val() || '';
        } else if (operation === 'set') {
            $('input', elem).val(value);
        }
    }

	// 用户名称点击编辑事件
    function myelem(value, options) {
    	var rowid = jQuery(grid_selector).jqGrid('getGridParam','selrow');
        var html = '<div><input type="text" value="'+value+'" style="width:300px"/>';
        html += '<button onclick="chooseSupplier(\''+rowid+'\')"><span><i class="fa zen-search bigger-120"></i></span></button></div>';
        return html;
    }

chooseSupplier方法就是人员选择方法，实现人员列表选择页面弹出，可以使用layer插件实现该功能。选择人员之后，保存用户之后，刷新列表页面。