工作中用到的easyui在线编辑-自定义编辑样式-选择框-官方示例+自定义

官方示例

一些常见的编辑器（editor）添加到数据网格（datagrid），以便用户编辑数据。 所有的编辑器（editor）都定义在 $.fn.datagrid.defaults.editors 对象中，这个可以继承扩展以便支持新的编辑器（editor）。 本教程将向您展示如何添加一个新的 numberspinner 编辑器到数据网格（datagrid）。

继承扩展 numberspinner 编辑器

1. $.extend($.fn.datagrid.defaults.editors, {

2. numberspinner: {

3. init: function(container, options){

4. var input = $('<input type="text">').appendTo(container);

5. return input.numberspinner(options);

6. },

7. destroy: function(target){

8. $(target).numberspinner('destroy');

9. },

10. getValue: function(target){

11. return $(target).numberspinner('getValue');

12. },

13. setValue: function(target, value){

14. $(target).numberspinner('setValue',value);

15. },

16. resize: function(target, width){

17. $(target).numberspinner('resize',width);

18. }

19. }

20. });

在 html 标记中创建数据网格（DataGrid）

1. <table id="tt" style="width:600px;height:250px"

2. url="data/datagrid_data.json" title="Editable DataGrid" iconCls="icon-edit"

3. singleSelect="true" idField="itemid" fitColumns="true">

4. <thead>

5. <tr>

6. <th field="itemid" width="60">Item ID</th>

7. <th field="listprice" width="80" align="right" editor="{type:'numberbox',options:{precision:1}}">List Price</th>

8. <th field="unitcost" width="80" align="right" editor="numberspinner">Unit Cost</th>

9. <th field="attr1" width="180" editor="text">Attribute</th>

10. <th field="status" width="60" align="center" editor="{type:'checkbox',options:{on:'P',off:''}}">Status</th>

11. <th field="action" width="80" align="center" formatter="formatAction">Action</th>

12. </tr>

13. </thead>

14. </table>

 

 

 

 

/****

 * 扩展在线编辑-选择框*/

var tempId=0;

$.extend($.fn.datagrid.defaults.editors, {

      selectWinSpinner: {

            init: function(container, options){

                  tempId=tempId+1;

                  var input = $('<input id="select_text_'+tempId+'" name=""  class="easyui-textbox theme-textbox-radius" data-options="buttonIcon:\'icon-add\',buttonAlign:\'right\',onClickButton:function(){selectProviderWin(\''+tempId+'\');} , prompt:\'请选择...\'"  editable=\'false\'  style="width:140px;height:26px">').appendTo(container);

                  return input.textbox(options);

            },

            destroy: function(target){

                  $(target).textbox('destroy');

            },

            getValue: function(target){

               return   $(target).textbox('getValue');

            },

            setValue: function(target, value){

                  $(target).textbox('setValue',value);

            },

            resize: function(target, width){

                  //自适应宽度没有实现

//                var input=$(target);

//                if($.boxModel==true){

//                  input.width(width-(input.outWidth()-input.width()));

//                }else{

//                  input.width(width);

//                }

            }

      }

});