datagrid嵌套combogrid 上下左右键

5660阅读　0评论2015-01-28　fjzhuozl
分类：JavaScript

以前自己用jquery写了一个datagrid嵌套combogrid的小插件。
现在，很多页面替换成easyui了。想找个跟之前自己写的差不多的。google 半天找不到。自己组装了一下。
如果想做类似功能的就不用那么累google了。

还有一些功能没完善。满用。





点击(此处)折叠或打开

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>datagrid嵌套combogrid上下左右</title>
  5. <link rel="stylesheet" type="text/css" href="../script/easyui/themes/default/easyui.css">
  6. <link rel="stylesheet" type="text/css" href="../script/easyui/themes/icon.css">
  7. <script type="text/javascript" src="../script/easyui/jquery-1.8.0.min.js"></script>
  8. <script type="text/javascript" src="../script/easyui/jquery.easyui.min.js"></script>
  9. <script type="text/javascript">
  10. function isEmpty(obj){
  11.     for (var name in obj){
  12.         return false;
  13.     }
  14.     return true;
  15. };

  17. $.extend($.fn.datagrid.defaults.editors, {
  18.     combogrid: {
  19.         init: function(container, options){
  20.             var input = $('').appendTo(container);
  21.             input.combogrid(options);
  22.             return input;
  23.         },
  24.         destroy: function(target){
  25.             $(target).combogrid('destroy');
  26.         },
  27.         getValue: function(target){
  28.             return $(target).combogrid('getValue');
  29.         },
  30.         setValue: function(target, value){
  31.             $(target).combogrid('setValue', value);
  32.         },
  33.         resize: function(target, width){
  34.             $(target).combogrid('resize',width);
  35.         }
  36.     }
  37. });

  39.    var SampleInfo={};
  40.    
  41.    $.extend($.fn.datagrid.methods, {
  42.             editCell: function(jq,param){
  43.                 return jq.each(function(){
  44.                     var opts = $(this).datagrid('options');
  45.                     var fields = $(this).datagrid('getColumnFields',true).concat($(this).datagrid('getColumnFields'));
  46.                     for(var i=0; i<fields.length; i++){
  47.                         var col = $(this).datagrid('getColumnOption', fields[i]);
  48.                         col.editor1 = col.editor;
  49.                         if (fields[i] != param.field){
  50.                             col.editor = null;
  51.                         }
  52.                     }
  53.                     $(this).datagrid('beginEdit', param.index);
  54.                     var ed = $(this).datagrid('getEditor', param);
  55.                     if (ed){
  56.                         if ($(ed.target).hasClass('textbox-f')){
  57.                                console.log("textbox-f");
  58.                             $(ed.target).textbox('textbox').focus();
  59.                             $(ed.target).textbox('textbox').select();
  60.                         } else if($(ed.target).hasClass('combogrid-editable-input')){
  61.                             console.log("combogrid-editable-input");
  62.                             $(ed.target).parent().find(".combo-text").focus();
  63.                             $(ed.target).parent().find(".combo-text").select();
  64.                             //绑定key事件
  65.                             $(ed.target).parent().find(".combo-text").bind('keydown', function (e) {
  66.                                 if(e.keyCode==13){
  67.                                     $('#dg').datagrid('updateRow', {
  68.              index: SampleInfo.editorIndex,
  69.              row: {
  70.              goods_name:SampleInfo.rowData.goods_name,
  71.                  Unit3: SampleInfo.rowData.Unit3,
  72.                  WPGG: SampleInfo.rowData.wpgg
  73.              }
  74.          });
  75.                  opts.onClickCell(SampleInfo.editorIndex,"Unit3");
  76.                                 }
  77.                             });
  78.                             
  79.                         } else {
  80.                             console.log("textbox-other");
  81.                             $(ed.target).focus();
  82.                             $(ed.target).select();
  83.                         }
  84.                     }
  85.                     for(var i=0; i<fields.length; i++){
  86.                         var col = $(this).datagrid('getColumnOption', fields[i]);
  87.                         col.editor = col.editor1;
  88.                     }
  89.                 });
  90.             },
  91.             
  92.               enableCellEditing: function(jq){
  93.                 return jq.each(function(){
  94.                     var dg = $(this);
  95.                     var opts = dg.datagrid('options');
  96.                     opts.oldOnClickCell = opts.onClickCell;
  97.                     opts.onClickCell = function(index, field){
  98.                         SampleInfo.editorIndex=index;
  99.                         SampleInfo.editorField=field;
  100.                    
  101.                         if (opts.editIndex != undefined){
  102.                             if (dg.datagrid('validateRow', opts.editIndex)){
  103.                                 dg.datagrid('endEdit', opts.editIndex);
  104.                                 opts.editIndex = undefined;
  105.                             } else {
  106.                                 return;
  107.                             }
  108.                         }
  109.                         dg.datagrid('selectRow', index).datagrid('editCell', {
  110.                             index: index,
  111.                             field: field
  112.                         });
  113.                         opts.editIndex = index;
  114.                         opts.oldOnClickCell.call(this, index, field);
  115.                     }
  116.                 });
  117.                 }
  118.         });
  119.         
  120.         
  121.         
  122.   
  123. $.extend($.fn.datagrid.methods, {
  124.     keyCtr : function (jq) {
  125.         return jq.each(function () {
  126.             var grid = $(this);
  127.             grid.datagrid('getPanel').panel('panel').attr('tabindex', 1).bind('keydown', function (e) {
  128.                 if(SampleInfo.editorIndex == -1){
  129.                     return;
  130.                 }
  131.                 var keyCode = e.keyCode;
  132.                 //当键盘按下键为上下左右键时,把网格键盘按下的事件默认动作去除,要不然会影响按上下左右键选择文本框值
  133.                 if( keyCode == 37 || keyCode == 39 || keyCode == 38 || keyCode == 40 || keyCode==9){
  134.                     e.preventDefault();
  135.                     e.stopPropagation();
  136.                 }
  137.                 rows = grid.datagrid('getRows');
  138.                 var editors = grid.datagrid('getEditors',SampleInfo.editorIndex);
  139.                    var editor = grid.datagrid('getEditor', {index:SampleInfo.editorIndex,field:SampleInfo.editorField});
  140.                 switch (keyCode) {
  141.                 case 38: // up    
  142.                     if (editors) {
  143.                         var editor = grid.datagrid('getEditor', {index:SampleInfo.editorIndex,field:SampleInfo.editorField});
  144.                         if(editor.type=='combogrid') return ;
  145.                         
  146.                         if(rows.length>SampleInfo.editorIndex && SampleInfo.editorIndex>=1){
  147.                             SampleInfo.editorIndex--;
  148.                         }else{
  149.                             SampleInfo.editorIndex = rows.length-1;
  150.                         }
  151.                         var opts = grid.datagrid('options');
  152.                         opts.onClickCell(SampleInfo.editorIndex,SampleInfo.editorField);
  153.                     }
  154.                     break;
  155.                 case 40: // down
  156.                     if (editors) {
  157.                            var editor = grid.datagrid('getEditor', {index:SampleInfo.editorIndex,field:SampleInfo.editorField});
  158.                         if(editor.type=='combogrid') return ;
  159.                         
  160.                            if(rows.length-1>SampleInfo.editorIndex){
  161.                             SampleInfo.editorIndex++;
  162.                         }else{
  163.                             SampleInfo.editorIndex = 0;
  164.                         }
  165.                            var opts = grid.datagrid('options');
  166.                         opts.onClickCell(SampleInfo.editorIndex,SampleInfo.editorField);
  167.                     }
  168.                     break;
  169.                 case 37: // left
  170.                     if (editors) {
  171.                         if(SampleInfo.editorField == 'CJ_Name'){
  172.                             SampleInfo.editorField = 'Price';
  173.                         }else if(SampleInfo.editorField == 'Price'){
  174.                             SampleInfo.editorField = 'Unit3';
  175.                         }else if(SampleInfo.editorField == 'Unit3'){
  176.                             SampleInfo.editorField = 'Goods_Name';
  177.                         }
  178.                           var opts = grid.datagrid('options');
  179.                         opts.onClickCell(SampleInfo.editorIndex,SampleInfo.editorField);
  180.                     }
  181.                     break;
  182.                 case 39: // right
  183.                        if (editors) {
  184.                         if(SampleInfo.editorField == 'Goods_Name'){
  185.                             SampleInfo.editorField = 'Unit3';
  186.                         }else if(SampleInfo.editorField == 'Unit3'){
  187.                             SampleInfo.editorField = 'Price';
  188.                         }else if(SampleInfo.editorField == 'Price'){
  189.                             SampleInfo.editorField = 'CJ_Name';
  190.                         }
  191.                         var opts = grid.datagrid('options');
  192.                         opts.onClickCell(SampleInfo.editorIndex,SampleInfo.editorField);
  193.                        }
  194.                     break;
  195.                 case 13: // enter键
  196.                        if (editors) {
  197.                         if(SampleInfo.editorField == 'Goods_Name'){
  198.                             SampleInfo.editorField = 'Unit3';
  199.                         }else if(SampleInfo.editorField == 'Unit3'){
  200.                             SampleInfo.editorField = 'Price';
  201.                         }else if(SampleInfo.editorField == 'Price'){
  202.                             SampleInfo.editorField = 'CJ_Name';
  203.                         }
  204.                         var opts = grid.datagrid('options');
  205.                         opts.onClickCell(SampleInfo.editorIndex,SampleInfo.editorField);
  206.                        }
  207.                     break;
  208.                 case 9: // Tab键
  209.           if (editors) {
  210.                            var editor = grid.datagrid('getEditor', {index:SampleInfo.editorIndex,field:SampleInfo.editorField});
  211.                            if(rows.length-1>SampleInfo.editorIndex){
  212.                             SampleInfo.editorIndex++;
  213.                         }else{
  214.                             SampleInfo.editorIndex = 0;
  215.                         }
  216.                            var opts = grid.datagrid('options');
  217.                         opts.onClickCell(SampleInfo.editorIndex,"Goods_Name");
  218.                     }
  219.                     break;
  220.                 case 27: //F2保存键
  221.                       $('#dg').datagrid('endEdit',SampleInfo.editorIndex);
  222.                      break;
  223.                 }
  224.             });
  225.         });
  226.     }
  227. });
  228.         
  229.  
  230.     $(function(){
  231.         $('#dg').datagrid({
  232.             singleSelect:false,
  233.          url:"../goodslist1.json",
  234.             columns:[[
  235.                 {field:'Goods_Name',title:'物品名称',width:100,
  236.                     editor:{
  237.                         type:'combogrid',
  238.                         options:{
  239.                             required: false,
  240.                             panelWidth:450,
  241.                             idField:'id',
  242.                             textField:'goods_name',
  243.                          value:'',//缺省值
  244.                          mode:'remote',
  245.                      url:"../goodslist2.json",
  246.                             columns:[[
  247.                                 {field:'id',title:'id',width:60},
  248.                                 {field:'goods_name',title:'编码',width:60},
  249.                                 {field:'wpgg',title:'规格',width:100},
  250.                                 {field:'unit3',title:'单位',width:120}
  251.                             ]],
  252.                             onCheck:function(rowIndex,rowData){
  253.                             },
  254.                             onClickRow:function(newValue, oldValue){
  255.                                 var opts = $('#dg').datagrid('options');
  256.              opts.onClickCell(SampleInfo.editorIndex,"Unit3");
  257.                             },
  258.                      onSelect:function(rowIndex, rowData) {
  259.                          SampleInfo.rowData=rowData;
  260.          }
  261.                         },
  262.                     }
  263.                 },
  264.                 {field:'WPGG',title:'规格',width:100,align:'right',halign:'center'},
  265.                 {field:'Unit3',title:'单位',width:100,align:'right',halign:'center',editor:'text'},
  266.                 {field:'Price',title:'单价',width:100,align:'right',halign:'center',editor:{type:'numberbox',options:{precision:2}}},
  267.                 {field:'Provider_Name',title:'供应商',width:100,align:'right',halign:'center'},
  268.                 {field:'CJ_Name',title:'厂家',width:100,align:'right',halign:'center',editor:'text'}
  269.             ]]
  270.         });
  271.         $('#dg').datagrid().datagrid('enableCellEditing');
  272.         $("#dg").datagrid().datagrid("keyCtr");
  273. });

  275. </script>
  276. </head>
  277. <body>
  278.     <table id="dg" title="datagrid嵌套combogrid" width="100%" height="auto"
  279.       pagesize="15" pageList="[10,15,20]" toolbar="#toolbar" tools="#tools" pagination="true" rownumbers="true" fitColumns="true" fit="true">
  280.     </table>
  281. </body>
  282. </html>


上一篇：基于Spring注解方式配置项目
下一篇：没有了