这次帮老师做了一个银行的积分系统,我主要负责前台的页面开发,采用了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传输数据格式。
差不多了,在接下来的文章中再说其他的吧,可能有些地方漏掉了,再补充。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。