jqGrid-colModel之自定义输入函数 自定义edittype的控件类型

参考文章: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:common_rules#editable

参考文章中edittype:'custom'示例有些问题,正确调用请看下面例子。

本例子主要想实现input输入框的onclick事件。

  colNames:['ID','用户名','密码','权限'],
  colModel:[
   {name:'id',index:'id', width:60, key:true, editable:false,
    searchoptions:{sopt:['eq','ne','lt','le','gt','ge']} },
   {name:'username',index:'username', width:120, sortable:false, editable:true,
    editrules:{required: true} },
   {name:'password',index:'password', width:120, sortable:false, editable:true,
    edittype:'custom', editoptions:{custom_element: myelem, custom_value: myvalue} },
   {name:'usertype',index:'usertype', width:60, editable:true,
    searchoptions:{sopt:['eq','ne','lt','le','gt','ge']} }
  ],

jqGrid-colModel之自定义输入函数 自定义edittype的控件类型_第1张图片

JS代码如下:

 function myelem (value, options) {
  var el = document.createElement_x("input");
  el.type="password";
  el.value = value;
  el.onclick = function() { el.focus(); el.select(); }; 
  //alert("myelem: "+value);
  return el;
 };
 
 function myvalue(elem, operation, value) {
  //alert("myvalue: "+value);
  if(operation === 'get') {
   return $(elem).val();
  } else if(operation === 'set') {
   $(elem).val(value);
   }
 };


一定要注意的是:myelem 和myvalue 方法一定要放到创建grid的前面,要不是找不到的

你可能感兴趣的:(jqGrid)