[原创]银行MIS系统前台开发总结（1）

      这次帮老师做了一个银行的积分系统，我主要负责前台的页面开发，采用了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传输数据格式。

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