ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 应用开发 > IT综合 > jquery.edatagrid.js

jquery.edatagrid.js

IT综合 作者：shelly_kuang 时间：2016-05-11 23:59:07 0 删除 编辑

  1. /**
  2.  * edatagrid - jQuery EasyUI
  3.  *
  4.  * Licensed under the GPL:
  5.  * http://www.gnu.org/licenses/gpl.txt
  6.  *
  7.  * Copyright 2011-2015
  8.  *
  9.  * Dependencies:
  10.  * datagrid
  11.  * messager
  12.  *
  13.  */
  14. (function($){
  15.     // var oldLoadDataMethod = $.fn.datagrid.methods.loadData;
  16.     // $.fn.datagrid.methods.loadData = function(jq, data){
  17.     //     jq.each(function(){
  18.     //         $.data(this, 'datagrid').filterSource = null;
  19.     //     });
  20.     //     return oldLoadDataMethod.call($.fn.datagrid.methods, jq, data);
  21.     // };

  23.     var autoGrids = [];
  24.     function checkAutoGrid(){
  25.         autoGrids = $.grep(autoGrids, function(t){
  26.             return t.length && t.data('edatagrid');
  27.         });
  28.     }
  29.     function saveAutoGrid(omit){
  30.         checkAutoGrid();
  31.         $.map(autoGrids, function(t){
  32.             if (t[0] != $(omit)[0]){
  33.                 t.edatagrid('saveRow');
  34.             }
  35.         });
  36.         checkAutoGrid();
  37.     }
  38.     function addAutoGrid(dg){
  39.         checkAutoGrid();
  40.         for(var i=0; i<autoGrids.length; i++){
  41.             if ($(autoGrids[i])[0] == $(dg)[0]){return;}
  42.         }
  43.         autoGrids.push($(dg));
  44.     }
  45.     function delAutoGrid(dg){
  46.         checkAutoGrid();
  47.         autoGrids = $.grep(autoGrids, function(t){
  48.             return $(t)[0] != $(dg)[0];
  49.         });
  50.     }

  52.     $(function(){
  53.         $(document).unbind('.edatagrid').bind('mousedown.edatagrid', function(e){
  54.             var p = $(e.target).closest('div.datagrid-view,div.combo-panel,div.window,div.window-mask');
  55.             if (p.length){
  56.                 if (p.hasClass('datagrid-view')){
  57.                     saveAutoGrid(p.children('table'));
  58.                 }
  59.                 return;
  60.             }
  61.             saveAutoGrid();
  62.         });
  63.     });
  64.     
  65.     function buildGrid(target){
  66.         var opts = $.data(target, 'edatagrid').options;
  67.         $(target).datagrid($.extend({}, opts, {
  68.             onDblClickCell:function(index,field,value){
  69.                 if (opts.editing){
  70.                     $(this).edatagrid('editRow', index);
  71.                     focusEditor(target, field);
  72.                 }
  73.                 if (opts.onDblClickCell){
  74.                     opts.onDblClickCell.call(target, index, field, value);
  75.                 }
  76.             },
  77.             onClickCell:function(index,field,value){
  78.                 // if (opts.editing && opts.editIndex >= 0){
  79.                 //     $(this).edatagrid('editRow', index);
  80.                 //     focusEditor(target, field);
  81.                 // }
  82.                 if (opts.editIndex >= 0){
  83.                     var dg = $(this);
  84.                     if (opts.editing){
  85.                         dg.edatagrid('editRow', index);
  86.                     } else {
  87.                         setTimeout(function(){
  88.                             dg.edatagrid('selectRow', opts.editIndex);
  89.                         }, 0);
  90.                     }
  91.                     focusEditor(target, field);
  92.                 }
  93.                 if (opts.onClickCell){
  94.                     opts.onClickCell.call(target, index, field, value);
  95.                 }
  96.             },
  97.             onBeforeEdit: function(index, row){
  98.                 if (opts.onBeforeEdit){
  99.                     if (opts.onBeforeEdit.call(target, index, row) == false){
  100.                         return false;
  101.                     }
  102.                 }
  103.                 if (opts.autoSave){
  104.                     addAutoGrid(this);
  105.                 }
  106.                 opts.originalRow = $.extend(true, [], row);
  107.             },
  108.             onAfterEdit: function(index, row){
  109.                 delAutoGrid(this);
  110.                 opts.editIndex = -1;
  111.                 var url = row.isNewRecord ? opts.saveUrl : opts.updateUrl;
  112.                 if (url){
  113.                     var changed = false;
  114.                     var fields = $(this).edatagrid('getColumnFields',true).concat($(this).edatagrid('getColumnFields'));
  115.                     for(var i=0; i<fields.length; i++){
  116.                         var field = fields[i];
  117.                         var col = $(this).edatagrid('getColumnOption', field);
  118.                         if (col.editor && opts.originalRow[field] != row[field]){
  119.                             changed = true;
  120.                             break;
  121.                         }
  122.                     }
  123.                     if (changed){
  124.                         opts.poster.call(target, url, row, function(data){
  125.                             if (data.isError){
  126.                                 var originalRow = opts.originalRow;
  127.                                 $(target).edatagrid('cancelRow',index);
  128.                                 $(target).edatagrid('selectRow',index);
  129.                                 $(target).edatagrid('editRow',index);
  130.                                 opts.originalRow = originalRow;
  131.                                 opts.onError.call(target, index, data);
  132.                                 return;
  133.                             }
  134.                             data.isNewRecord = null;
  135.                             $(target).datagrid('updateRow', {
  136.                                 index: index,
  137.                                 row: data
  138.                             });
  139.                             if (opts.tree){
  140.                                 var idValue = row[opts.idField||'id'];
  141.                                 var t = $(opts.tree);
  142.                                 var node = t.tree('find', idValue);
  143.                                 if (node){
  144.                                     node.text = row[opts.treeTextField];
  145.                                     t.tree('update', node);
  146.                                 } else {
  147.                                     var pnode = t.tree('find', row[opts.treeParentField]);
  148.                                     t.tree('append', {
  149.                                         parent: (pnode ? pnode.target : null),
  150.                                         data: [{id:idValue,text:row[opts.treeTextField]}]
  151.                                     });
  152.                                 }
  153.                             }
  154.                             opts.onSuccess.call(target, index, row);
  155.                             opts.onSave.call(target, index, row);
  156.                         }, function(data){
  157.                             opts.onError.call(target, index, data);
  158.                         });
  159.                     } else {
  160.                         opts.onSave.call(target, index, row);
  161.                     }
  162.                 } else {
  163.                     opts.onSave.call(target, index, row);
  164.                 }
  165.                 if (opts.onAfterEdit) opts.onAfterEdit.call(target, index, row);
  166.             },
  167.             onCancelEdit: function(index, row){
  168.                 delAutoGrid(this);
  169.                 opts.editIndex = -1;
  170.                 if (row.isNewRecord) {
  171.                     $(this).datagrid('deleteRow', index);
  172.                 }
  173.                 if (opts.onCancelEdit) opts.onCancelEdit.call(target, index, row);
  174.             },
  175.             onBeforeLoad: function(param){
  176.                 if (opts.onBeforeLoad.call(target, param) == false){return false}
  177.                 $(this).edatagrid('cancelRow');
  178.                 if (opts.tree){
  179.                     var node = $(opts.tree).tree('getSelected');
  180.                     param[opts.treeParentField] = node ? node.id : undefined;
  181.                 }
  182.             }
  183.         }));
  184.         
  185.         
  186.         
  187.         if (opts.tree){
  188.             $(opts.tree).tree({
  189.                 url: opts.treeUrl,
  190.                 onClick: function(node){
  191.                     $(target).datagrid('load');
  192.                 },
  193.                 onDrop: function(dest,source,point){
  194.                     var targetId = $(this).tree('getNode', dest).id;
  195.                     var data = {
  196.                         id:source.id,
  197.                         targetId:targetId,
  198.                         point:point
  199.                     };
  200.                     opts.poster.call(target, opts.treeDndUrl, data, function(result){
  201.                         $(target).datagrid('load');
  202.                     });
  203.                 }
  204.             });
  205.         }
  206.     }

  208.     function focusEditor(target, field){
  209.         var opts = $(target).edatagrid('options');
  210.         var t;
  211.         var editor = $(target).datagrid('getEditor', {index:opts.editIndex,field:field});
  212.         if (editor){
  213.             t = editor.target;
  214.         } else {
  215.             var editors = $(target).datagrid('getEditors', opts.editIndex);
  216.             if (editors.length){
  217.                 t = editors[0].target;
  218.             }
  219.         }
  220.         if (t){
  221.             if ($(t).hasClass('textbox-f')){
  222.                 $(t).textbox('textbox').focus();
  223.             } else {
  224.                 $(t).focus();                    
  225.             }
  226.         }
  227.     }
  228.     
  229.     $.fn.edatagrid = function(options, param){
  230.         if (typeof options == 'string'){
  231.             var method = $.fn.edatagrid.methods[options];
  232.             if (method){
  233.                 return method(this, param);
  234.             } else {
  235.                 return this.datagrid(options, param);
  236.             }
  237.         }
  238.         
  239.         options = options || {};
  240.         return this.each(function(){
  241.             var state = $.data(this, 'edatagrid');
  242.             if (state){
  243.                 $.extend(state.options, options);
  244.             } else {
  245.                 $.data(this, 'edatagrid', {
  246.                     options: $.extend({}, $.fn.edatagrid.defaults, $.fn.edatagrid.parseOptions(this), options)
  247.                 });
  248.             }
  249.             buildGrid(this);
  250.         });
  251.     };
  252.     
  253.     $.fn.edatagrid.parseOptions = function(target){
  254.         return $.extend({}, $.fn.datagrid.parseOptions(target), {
  255.         });
  256.     };
  257.     
  258.     $.fn.edatagrid.methods = {
  259.         options: function(jq){
  260.             var opts = $.data(jq[0], 'edatagrid').options;
  261.             return opts;
  262.         },
  263.         loadData: function(jq, data){
  264.             return jq.each(function(){
  265.                 $(this).edatagrid('cancelRow');
  266.                 $(this).datagrid('loadData', data);
  267.             });
  268.         },
  269.         enableEditing: function(jq){
  270.             return jq.each(function(){
  271.                 var opts = $.data(this, 'edatagrid').options;
  272.                 opts.editing = true;
  273.             });
  274.         },
  275.         disableEditing: function(jq){
  276.             return jq.each(function(){
  277.                 var opts = $.data(this, 'edatagrid').options;
  278.                 opts.editing = false;
  279.             });
  280.         },
  281.         isEditing: function(jq, index){
  282.             var opts = $.data(jq[0], 'edatagrid').options;
  283.             var tr = opts.finder.getTr(jq[0], index);
  284.             return tr.length && tr.hasClass('datagrid-row-editing');
  285.         },
  286.         editRow: function(jq, index){
  287.             return jq.each(function(){
  288.                 var dg = $(this);
  289.                 var opts = $.data(this, 'edatagrid').options;
  290.                 var editIndex = opts.editIndex;
  291.                 if (editIndex != index){
  292.                     if (dg.datagrid('validateRow', editIndex)){
  293.                         if (editIndex>=0){
  294.                             if (opts.onBeforeSave.call(this, editIndex) == false) {
  295.                                 setTimeout(function(){
  296.                                     dg.datagrid('selectRow', editIndex);
  297.                                 },0);
  298.                                 return;
  299.                             }
  300.                         }
  301.                         dg.datagrid('endEdit', editIndex);
  302.                         dg.datagrid('beginEdit', index);
  303.                         if (!dg.edatagrid('isEditing', index)){
  304.                             return;
  305.                         }
  306.                         opts.editIndex = index;
  307.                         focusEditor(this);
  308.                         
  309.                         var rows = dg.datagrid('getRows');
  310.                         opts.onEdit.call(this, index, rows[index]);
  311.                     } else {
  312.                         setTimeout(function(){
  313.                             dg.datagrid('selectRow', editIndex);
  314.                         }, 0);
  315.                     }
  316.                 }
  317.             });
  318.         },
  319.         addRow: function(jq, index){
  320.             return jq.each(function(){
  321.                 var dg = $(this);
  322.                 var opts = $.data(this, 'edatagrid').options;
  323.                 if (opts.editIndex >= 0){
  324.                     if (!dg.datagrid('validateRow', opts.editIndex)){
  325.                         dg.datagrid('selectRow', opts.editIndex);
  326.                         return;
  327.                     }
  328.                     if (opts.onBeforeSave.call(this, opts.editIndex) == false){
  329.                         setTimeout(function(){
  330.                             dg.datagrid('selectRow', opts.editIndex);
  331.                         },0);
  332.                         return;
  333.                     }
  334.                     dg.datagrid('endEdit', opts.editIndex);
  335.                 }
  336.                 var rows = dg.datagrid('getRows');
  337.                 
  338.                 function _add(index, row){
  339.                     if (index == undefined){
  340.                         dg.datagrid('appendRow', row);
  341.                         opts.editIndex = rows.length - 1;
  342.                     } else {
  343.                         dg.datagrid('insertRow', {index:index,row:row});
  344.                         opts.editIndex = index;
  345.                     }
  346.                 }
  347.                 if (typeof index == 'object'){
  348.                     _add(index.index, $.extend(index.row, {isNewRecord:true}))
  349.                 } else {
  350.                     _add(index, {isNewRecord:true});
  351.                 }
  352.                 
  353. //                if (index == undefined){
  354. //                    dg.datagrid('appendRow', {isNewRecord:true});
  355. //                    opts.editIndex = rows.length - 1;
  356. //                } else {
  357. //                    dg.datagrid('insertRow', {
  358. //                        index: index,
  359. //                        row: {isNewRecord:true}
  360. //                    });
  361. //                    opts.editIndex = index;
  362. //                }
  363.                 
  364.                 dg.datagrid('beginEdit', opts.editIndex);
  365.                 dg.datagrid('selectRow', opts.editIndex);
  366.                 
  367.                 if (opts.tree){
  368.                     var node = $(opts.tree).tree('getSelected');
  369.                     rows[opts.editIndex][opts.treeParentField] = (node ? node.id : 0);
  370.                 }
  371.                 
  372.                 opts.onAdd.call(this, opts.editIndex, rows[opts.editIndex]);
  373.             });
  374.         },
  375.         saveRow: function(jq){
  376.             return jq.each(function(){
  377.                 var dg = $(this);
  378.                 var opts = $.data(this, 'edatagrid').options;
  379.                 if (opts.editIndex >= 0){
  380.                     if (opts.onBeforeSave.call(this, opts.editIndex) == false) {
  381.                         setTimeout(function(){
  382.                             dg.datagrid('selectRow', opts.editIndex);
  383.                         },0);
  384.                         return;
  385.                     }
  386.                     $(this).datagrid('endEdit', opts.editIndex);
  387.                 }
  388.             });
  389.         },
  390.         cancelRow: function(jq){
  391.             return jq.each(function(){
  392.                 var opts = $.data(this, 'edatagrid').options;
  393.                 if (opts.editIndex >= 0){
  394.                     $(this).datagrid('cancelEdit', opts.editIndex);
  395.                 }
  396.             });
  397.         },
  398.         destroyRow: function(jq, index){
  399.             return jq.each(function(){
  400.                 var dg = $(this);
  401.                 var opts = $.data(this, 'edatagrid').options;
  402.                 
  403.                 var rows = [];
  404.                 if (index == undefined){
  405.                     rows = dg.datagrid('getSelections');
  406.                 } else {
  407.                     var rowIndexes = $.isArray(index) ? index : [index];
  408.                     for(var i=0; i<rowIndexes.length; i++){
  409.                         var row = opts.finder.getRow(this, rowIndexes[i]);
  410.                         if (row){
  411.                             rows.push(row);
  412.                         }
  413.                     }
  414.                 }
  415.                 
  416.                 if (!rows.length){
  417.                     $.messager.show({
  418.                         title: opts.destroyMsg.norecord.title,
  419.                         msg: opts.destroyMsg.norecord.msg
  420.                     });
  421.                     return;
  422.                 }
  423.                 
  424.                 $.messager.confirm(opts.destroyMsg.confirm.title,opts.destroyMsg.confirm.msg,function(r){
  425.                     if (r){
  426.                         for(var i=0; i<rows.length; i++){
  427.                             _del(rows[i]);
  428.                         }
  429.                         dg.datagrid('clearSelections');
  430.                     }
  431.                 });
  432.                 
  433.                 function _del(row){
  434.                     var index = dg.datagrid('getRowIndex', row);
  435.                     if (index == -1){return}
  436.                     if (row.isNewRecord){
  437.                         dg.datagrid('cancelEdit', index);
  438.                     } else {
  439.                         if (opts.destroyUrl){
  440.                             var idValue = row[opts.idField||'id'];
  441.                             opts.poster.call(dg[0], opts.destroyUrl, {id:idValue}, function(data){
  442.                                 var index = dg.datagrid('getRowIndex', idValue);
  443.                                 if (data.isError){
  444.                                     dg.datagrid('selectRow', index);
  445.                                     opts.onError.call(dg[0], index, data);
  446.                                     return;
  447.                                 }
  448.                                 if (opts.tree){
  449.                                     dg.datagrid('reload');
  450.                                     var t = $(opts.tree);
  451.                                     var node = t.tree('find', idValue);
  452.                                     if (node){
  453.                                         t.tree('remove', node.target);
  454.                                     }
  455.                                 } else {
  456.                                     dg.datagrid('cancelEdit', index);
  457.                                     dg.datagrid('deleteRow', index);
  458.                                 }
  459.                                 opts.onDestroy.call(dg[0], index, row);
  460.                                 var pager = dg.datagrid('getPager');
  461.                                 if (pager.length && !dg.datagrid('getRows').length){
  462.                                     dg.datagrid('options').pageNumber = pager.pagination('options').pageNumber;
  463.                                     dg.datagrid('reload');
  464.                                 }
  465.                             }, function(data){
  466.                                 opts.onError.call(dg[0], index, data);
  467.                             });
  468.                         } else {
  469.                             dg.datagrid('cancelEdit', index);
  470.                             dg.datagrid('deleteRow', index);
  471.                             opts.onDestroy.call(dg[0], index, row);
  472.                         }
  473.                     }
  474.                 }
  475.             });
  476.         }
  477.     };
  478.     
  479.     $.fn.edatagrid.defaults = $.extend({}, $.fn.datagrid.defaults, {
  480.         singleSelect: true,
  481.         editing: true,
  482.         editIndex: -1,
  483.         destroyMsg:{
  484.             norecord:{
  485.                 title:'Warning',
  486.                 msg:'No record is selected.'
  487.             },
  488.             confirm:{
  489.                 title:'Confirm',
  490.                 msg:'Are you sure you want to delete?'
  491.             }
  492.         },
  493.         poster: function(url, data, success, error){
  494.             $.ajax({
  495.                 type: 'post',
  496.                 url: url,
  497.                 data: data,
  498.                 dataType: 'json',
  499.                 success: function(data){
  500.                     success(data);
  501.                 },
  502.                 error: function(jqXHR, textStatus, errorThrown){
  503.                     error({
  504.                         jqXHR: jqXHR,
  505.                         textStatus: textStatus,
  506.                         errorThrown: errorThrown
  507.                     });
  508.                 }
  509.             });
  510.         },
  511.         
  512.         autoSave: false,    // auto save the editing row when click out of datagrid
  513.         url: null,    // return the datagrid data
  514.         saveUrl: null,    // return the added row
  515.         updateUrl: null,    // return the updated row
  516.         destroyUrl: null,    // return {success:true}
  517.         
  518.         tree: null,        // the tree selector
  519.         treeUrl: null,    // return tree data
  520.         treeDndUrl: null,    // to process the drag and drop operation, return {success:true}
  521.         treeTextField: 'name',
  522.         treeParentField: 'parentId',
  523.         
  524.         onAdd: function(index, row){},
  525.         onEdit: function(index, row){},
  526.         onBeforeSave: function(index){},
  527.         onSave: function(index, row){},
  528.         onSuccess: function(index, row){},
  529.         onDestroy: function(index, row){},
  530.         onError: function(index, row){}
  531.     });
  532.     
  533.     ////////////////////////////////
  534.     $.parser.plugins.push('edatagrid');
  535. })(jQuery);

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29404710/viewspace-2098201/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： editable-datagrid.html
下一篇： 没有了~
请登录后发表评论 登录
全部评论
shelly_kuang

注册时间：2015-01-16

  • 博文量
    23
  • 访问量
    49457

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593