OA项目实施与开发中实用的js及技巧

OA项目实施与开发中实用的js及技巧

1 前言：js的放置区域

    流程：1)可以将js代码插入到代码块中

          2)可以创建一个jsp文件，将js代码放入jsp中，PC端将该文件服务器上的路径更新到表workflow_base的custompage字段中，移动端更新到表workflow_base的custompage4Emoble字段中。

    模块：1)可以将js代码插入到代码块中

          2)可以创建一个jsp文件，将js代码放入jsp中，将该文件服务器上的路径更新到表modeinfo的custompage字段中。

OA项目实施与开发中实用的js及技巧

2 js实用开发应用场景

    常用的js弹出提示方式使用alert()。

在本产品下，PC端使用Dialog.alert(); 移动端使用$.alert(‘’, promptWrod);

流程提交和建模保存方法，需要对表单保存前校验重写该方法：

checkCustomize = function(){return true;};

表单页面字段取值：

jQuery("#fieldid").val()

日期字段比较：

var date1 = jQuery("#field1id").val();

var date2 = jQuery("#field2id").val();

获取值后直接进行比较：if(date1>=date2){}

明细表循环获取值

PC端：jQuery("input[name='check_node_0']").each(function(){

            var index = jQuery(this).val();

            jQuery(“#fieldid_”+index).val();

});

手机端：jQuery("input[name='check_node_0']").each(function(){

            var index = jQuery(this).attr(‘_rowindex’);

            jQuery(“#fieldid_”+index).val();

});

    控制明细表里行隐藏或显示：

        jQuery(jQuery('#fieldid_i').parents('tr')[0]).hide();

        jQuery(jQuery('#fieldid_i').parents('tr')[0]).show();

给浏览按钮类型字段、时间日期类型绑定事件，使用bindPropertyChange方法，例如：

        jQuery(“#fieldid”).bindPropertyChange(function(){});

     给选择框类型字段绑定事件，可使用change

     给文本框类型字段绑定事件，可使用blur或者click

    给check框类型字段绑定事件，可使用click

    问题及技巧：

         在建模页面，bindPropertyChange方法不起作用，可新建一个文本类型的字段通过字段联动将浏览按钮的值赋值到文本字段中，再给文本类型的字段绑定事件

    在主框架打开页面：

        Window.open(url,’ mainFrame’);

         <a href=’url’ target=’ mainFrame’></a>

系统打开的对话窗口：

        function openDialog(){

            dialog = new window.top.Dialog();

            dialog.currentWindow = window;

            dialog.Width = 600;宽度

            dialog.Height = 380;//高度

            dialog.Title = "title";//标题

            dialog.URL =url;//显示地址

            dialog.OKEvent = function(){//弹出框确认事件

                dialog.close();

            };

            dialog.show();

        }

系统打开的一个弹出窗口：

openFullWindow(url);

给流程或建模页面增加按钮技巧：

        可通过增加一个字段（任意类型），通过jQuery的append()或after()方法增加按钮，jQuery(“#fielid”).append(“<input type='button' class='e8_btn_top_first' value='按钮' id='saveBtn' onclick='fun();'/>”);

判断checkbox的选择状态：jQuery("#inputid").is(':checked')，为true表示选中

使所用的明细行选中状态：jQuery("input[name=check_node_0]").attr("checked",true);

主表字段带出明细表字段的值：

后台通过将数据已json数组的格式输出，前台通过ajax获取循环读取赋值。

        jQuery.ajax({

            type:"POST",

            url:url,

            data:{ "param":value},

            success:function(res){

                res = res.replace(/[\r]/g,"");    //替换换行

                res = res.replace(/[\n]/g,"");    //替换回车

                var json = eval("("+res+")");

                    jQuery.each(json.data,function(i){

                          addRow0(0);

            var rowIndex=jQuery("input[name=check_node_0]:last").val();

                            jQuery("#fieldid_"+rowIndex).val(json.data[i].value);

jQuery("#fieldid_"+rowIndex+"span").text(json.data[i].value);

                    });

            },

            error:function(e){}

        });

自定义删除明细行弹出确认提示，如何省略这提示：

        重写明细删除方法

        isdel=function(){  

            return true;  

        }

常用的方法：

格式化日期,形如yyyy-mm-dd

function formatDate(date) {     

           var myyear = date.getFullYear();     

             var mymonth = date.getMonth()+1;     

             var myweekday = date.getDate();     

             if(mymonth < 10){     

                mymonth = "0" + mymonth;     

           }     

           if(myweekday < 10){     

            myweekday = "0" + myweekday;     

             }     

           return (myyear+"-"+mymonth + "-" + myweekday);     

}

计算两个日期的相差天数：

function
getDateDiff(date1,date2){

            var
arr1=date1.split('-');

        var
arr2=date2.split('-');
        var
d1=new
Date(arr1[0],parseInt(arr1[1],10)-1,arr1[2]);
        var
d2=new
Date(arr2[0],parseInt(arr2[1],10)-1,arr2[2]);
        var
result
=
(d2.getTime()-d1.getTime())/(1000*3600*24)
        if(result
<
0)
        result
=
0;
        return
result;}

场 景

根据上传的附件选择第一个附件的名称作为流程的某个字段的值或标题，首先字段或标题设置为空：

setInterval("fileNameToRequestName()",200);

function fileNameToRequestName(){

    var index=1;

    var requestname = jQuery("#requestname").val();

    jQuery(".progressWrapper").each(function(){

        if(index==1){

            var $this = jQuery(this).children("div");

            var progressName = $this.children("div.progressName").text();

            progressName = progressName.substring(0,progressName.lastIndexOf("."));

            var progressBarStatus = $this.children("div.progressBarStatus").text();

            if(requestname==''){

                if("Cancelled"!=progressBarStatus){

                    jQuery("#requestname").val(progressName);

                    index++;

                }

            }

        }

    });

}

根据页面上选择的值在一块区域动态显示页面：

方法-：

1、添加一个iframe，命名iframe的id。

2、绑定点击事件，方法：

Window.open(url,iframe的id);

方法二：

添加一个iframe，命令iframe的id，并附上默认的src

绑定事件方法：

jQuery(“iframe”).attr(‘src’,url);

document.getElementById('iframe').src=src;

需要获取配置文件的值:

function getPropValue(propname,fieldname){

var result = '';

jQuery.ajax({

url: 'url?poopname='+propname+'&fieldname='+fieldname,

dataType: "text",

contentType : "charset=gbk",

async:false,

success:function(data){

result = jQuery.trim(data);

},

         error:function(){},

　　});

return result;

}

关闭对话框刷新当前页面，在关闭的对话框的动作中调用延时刷新的方法

    Function reflash(){

setTimeout(“location.reload(true);”,1000);

}

var dialog = new window.top.Dialog();

        dialog.currentWindow = window;

        dialog.URL = dialogurl;

        dialog.Width = width ;

        dialog.Height = height;

        dialog.Title=title;

        dialog.Drag = true;

        dialog.CancelEvent = function(){

            reflash ();

            dialog.close();

        };

        dialog.show();