温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

[置顶]       银行MIS系统前台开发总结(1)

发布时间:2020-06-17 07:18:26 来源:网络 阅读:322 作者:873582595 栏目:web开发

这次帮老师做了一个银行的积分系统,我主要负责前台的页面开发,采用了Html和jquery,在使用jquery的时候,还主要用了easyui和datatable等控件,第一次将自己自学的东西用到了实践中,还是有些收获的,现记录如下:

      主要是分为JQuery的一些细节注意问题,easyui使用的时候一些问题,datatable使用的问题和json数据格式传输。

      先写一些JQuery和页面设计的时候的一些细节吧:

      我们开发的时候,先是用mockups画草图,然后具体写html页面,由于希望有好的响应速度,所以没有再继续转换为jsp页面,所以自己写js代码实现数据传输。

      Html的一些细节:现在貌似都不流行用table来设置界面布局,都是用div来包裹一些具体的input,select,label,a,然后通过div的id,class调整css,然后我的习惯是调整css都是用class属性,获取元素,然后继续获取元素属性。

      因为用到了easyui,它自带了很多css样式,所以可以直接引用,只要设置class='easyui-linkbutton',这是针对超链接的。

      然后我习惯的书写js代码都是通过一个独立的文件,设置与html页面同名的js文件,在这写针对这个页面的js代码,通过html的引用即可,如果使用myeclipse编写代码的话,可以按住ctrl+鼠标移动到具体函数或是超链接上,双击,单击,能找到具体函数,或是js文件就说明链接没有出错,可以防止一些函数名,js引用出错。

     下面说一些具体的js代码吧。

1 var XX = $('#id').val();//最一般的获取元素value值 2 var XX = $('#id').attr('value');//这种方式也可以 3 $('#id').attr("checked", true);   //设置checkbox是否已选 4 $('#id').attr("disabled", false);//设置input是否可用

上面几个是最简单的获取元素属性,接下来给几个适用于easyui里的

var productid = $('#productId').combobox('getValue'); //easyui里的combobox属性获取必须用.combobox('getValue') $('#productId').combobox('setValue','12'); //这个是设置easyui下的combobox属性 var startDate2 = $("#startdate2").datebox("getValue"); //easyui下的databox,同combobox

提到了databox就不得不说一下,因为它显示的外国的日期格式显示,如果想设置为我们的日期格式显示的话,只需要调用easyui/locale/easyui-lang-zh_CN.js就可以了,当初还试了很多方法,结果网上找到的,他们外国考虑的的却很全面撒。。

   接下来说说js里面的变量问题吧,很多面试题有过,看代码吧:

 data =1; function check(){     var data = 2;     alert(data);     test(); } function test(){     alert(data); }

显示结果为2,1

1 var data =1; 2 function check(){ 3     var data = 2; 4     alert(data); 5     test(); 6 } 7 function test(){ 8     alert(data); 9 }

显示结果为2,1

1 var data =1; 2 function check(){ 3     data = 2; 4     alert(data); 5     test(); 6 } 7 function test(){ 8     alert(data); 9 }

显示结果为2,2

     其实很容易区分的啦,除了在函数段里,用var声明的变量为局部变量,其他都是全局变量。

     好了,接下来说说我的一些习惯,js代码中都是用''单引号来引用ID,class,如果页面加载的时候需要执行一些函数就

$(document).ready(function(){  });

     接下来能说的只有JQuery的ajax函数,超级好用哎,很方便

 

$.ajax({         url:'XXXX.action',//replace with real dealing action         type: 'post',         data: "submitData=" + sendData,         async: false,         datatype:'json',         success: function(data){                                 } });

我们用的都是json传输数据格式。

      差不多了,在接下来的文章中再说其他的吧,可能有些地方漏掉了,再补充。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI