项目常用jquery/easyui函数小结

浏览数：99 / 时间：2015年06月09日

项目常用jquery/easyui函数小结

背景

项目中经常需要使用到一些功能，封装、重构、整理后形成代码沉淀，在此进行分享

代码

  1. /**
  2.  * @author gaohuia
  3.  * @site http://www.zeroplace.cn/
  4.  * 使用方式:$("#fm").serializeObject();
  5.  */
  7. (function($){  //把表单序列化成对象
  8.     $.fn.extend({
  9.         serializeObject:function(){
  10.             if(this.length>1){
  11.                 return false;
  12.             }
  13.             var arr=this.serializeArray();
  14.             var obj=new Object;
  15.             $.each(arr,function(k,v){
  16.                 if(obj[v.name]) {//处理相同名称多个键值的情况,如传递checkbox多选值
  17.                     obj[v.name]=obj[v.name]+‘,‘+v.value;
  18.                 }
  19.                 else {
  20.                     obj[v.name]=v.value;
  21.                 }
  22.             });
  23.             return obj;
  24.         },
  25.         extData:function(key,obj){ //扩展Dom节点上绑定的数据
  26.             var dd = this.data(key);
  27.             if(dd){
  28.                 this.data(key,$.extend({},dd,obj));
  29.             }else{
  30.                 this.data(key,obj);
  31.             }
  32.             return this;
  33.         },
  34.         /*
  35.         * 把form处理成   字符串，为对象或为数组
  36.         * */
  37.         encodeForm:function(type){//type：默认为字符串，1为对象，2为数组
  38.             var aR = [];
  39.             var aO = {};
  40.             $(":input[name]",this).each(function(){
  41.                 if(this.value.length>0){
  42.                     var pushVal;
  43.                     switch(type){
  44.                         case 1:
  45.                             aO[this.name]=this.value;
  46.                             break;
  47.                         case 2:
  48.                             aR.push({name:this.name,value:this.value});
  49.                             break;
  50.                         default:
  51.                             aR.push([this.name,this.value].join("="));
  52.                     }
  53.                 }
  54.             })
  55.             return (1==type ? aO : (2==type ? aR : aR.join("&")));
  56.         }
  57.     });
  59.     $.extend({
  60.         unParam:function(str,ifdeCode){
  61.             //s_proid=0202&s_unitName=KQY&s_unitAddress=&s_theirArea=&s_theirStreet=&s_contactStaff=&s_legalName=&s_objtype=jywlb_xzxk 转化为对象
  62.             //参数str:需要转化的字符串，ifdeCode:true则表明需要对转化值进行decode处理
  63.             var r = {};
  64.             var units = str.split("&");
  65.             for(var i=0;i<units.length;i++){
  66.                 var kv = units[i].split("=");
  67.                 var val = kv[1].length>0 ? kv[1] : undefined;
  68.                 val = (ifdeCode && val) ? decodeURIComponent(val) : val ;
  69.                 if(r[kv[0]]){
  70.                     r[kv[0]] = [r[kv[0]],val].join();
  71.                 }else{
  72.                     r[kv[0]]= val;
  73.                 }
  75.             }
  76.             return r;
  77.         },
  78.         /*
  79.          * 登记表布局的实现，
  80.          * 以body为底，一个计算大小的滚动center区域(id为center-layout)，一个固定高度为30的底部区域(id为south-layout)
  81.          * 参数为真时检测适用条件
  82.          */
  83.         applyLayout:function(ifDetect){
  84.             var scrollDom = $("#center-layout")
  85.             var southLayout = $("#south-layout");
  86.             if(ifDetect && (scrollDom.length<=0 ||southLayout.length<=0)){
  87.                 return;//不适用于该布局
  88.             }
  89.             $("html").css({height: "100%",overflow: "hidden"});
  91.             scrollDom.height($(‘body‘).parent().innerHeight() - southLayout.outerHeight()-5);
  93.             $(‘tr.list_colspan‘).bind(‘click.layout‘,function(){
  94.                 $(this).nextUntil(‘tr.list_colspan‘).toggle(100);//点击分栏目的行会收缩/展开后面的行
  95.             }).filter("[close=‘true‘]").click()
  96.         }
  97.     })
  98. })(jQuery);
  102. //所有的combobox都只能选择下拉
  103. if($.fn.combo){
  104.     $.fn.combo.defaults.editable = false;
  105. }
  106. if($.fn.combobox){
  107.     $.fn.combobox.defaults.editable = false;
  108. }
  109. if($.fn.combotree){
  110.     $.fn.combotree.defaults.editable = false;
  111. }
  112. //日期框不可编辑
  113. if($.fn.datebox){
  114.     $.fn.datebox.defaults.editable = false;
  115. }
  117. if($.fn.datetimebox){
  118.     $.fn.datetimebox.defaults.editable = false;
  119. }
  121. if($.fn.datagrid){
  122.     //给datagrid增加鼠标提示，显示其内容
  123.     var oriFunc = $.fn.datagrid.defaults.view.onAfterRender;
  124.     $.fn.datagrid.defaults.view.onAfterRender = function(tgt){
  125.         oriFunc(tgt);
  126.         $(tgt).datagrid("getPanel").find("div.datagrid-body").find("div.datagrid-cell").each(function(){
  127.             var $Obj = $(this)
  128.             $Obj.attr("title",$Obj.text());
  129.         })
  130.     }
  132.     //给datagrid增加一个方法：改变列设置
  133.     /*
  134.      * @param {Object} jq
  135.      * @param {Object} opts:设置，以数组形式提供，[{field:必需，要设置的列；title:给列设置一个新标题，width:给列设置一个新宽度}]
  136.      * width似乎没有效果
  137.      */
  138.     $.extend($.fn.datagrid.methods, {
  139.         setColumnOptions:function(jq, opts){
  140.             return jq.each(function(){
  141.                 var grid = $(this);
  142.                 var p = grid.datagrid("getPanel");
  144.                 $.each(opts,function(optsIdx,optsVal){
  145.                     if(optsVal.field){
  146.                         var td = p.find("div.datagrid-header").find("td[field=" + optsVal.field + "]");
  147.                         var gridOpts = grid.datagrid("getColumnOption",optsVal.field);
  148.                         $.extend(gridOpts,optsVal);
  149.                     }
  151.                     if(td && optsVal.title){
  152.                         var oriText = td.text();
  153.                         var textObj = td.find("span:contains(‘" + $.trim(oriText) + "‘)");
  154.                         textObj.text(optsVal.title);
  155.                     }
  157.                     if(td && optsVal.width){
  158.                         var cell =  p.find("td[field=" + optsVal.field + "]").find("div.datagrid-cell");
  159.                         cell.width(optsVal.width);
  160.                     }
  161.                 })
  162.             });
  163.         },
  164.         /*
  165.         * 返回特定列的标题
  166.         * */
  167.         getColumnTitles:function(jq,opts){
  168.             var cols = $(jq).data("datagrid").options.columns;
  169.             var reAry = [];
  170.             if(cols.length<=0){
  171.                 return reAry;
  172.             }
  174.             for(var i=0;i<cols.length;i++){
  175.                 var colsi = cols[i];
  176.                 for(var j=0;j<colsi.length;j++){
  177.                     var colsij = colsi[j];
  178.                     reAry.push(/^all$/i.test(opts) ? colsij.title : ( colsij.hidden || colsij.chekcbox ? undefined : colsij.title));
  179.                 }
  180.             }
  181.             return reAry;
  182.         }
  183.     });
  184. }

示例及效果

在其他博文中整理后逐步发布

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： 代码 ie class text ip htm html io ff java t 代码 ie class text ip htm html io ff java t

相关文章

随机文章

您可能还喜欢

您可能还喜欢