jQuery及EasyUI學習心得

在VS2010中，如果不能智能提醒，就先要確保JS文件被引入，然後再多次點擊“編輯”》》“IntelliSense"》》更新JS。

一、JQUERY部分：

1、在<script>中，如果是需要頁面打開就要載入的，需要先寫：

$(function(){

});

然後把需要變成EasyUI的input或div等的ID寫入其中，否則他們不能變成你想要的插件。當然，其他的函數，如onclick()，就要寫到其外了。

2、$.get()

$.get()是簡化的$.ajax()。用法如：

$("button").click(function(){
  $.get("demo_ajax_load.txt", function(result){
    $("div").html(result);
  });
});

這裏有2個知識點：

① 如果要得到服務器返回的值，就必須用後面加函數的方法。原因是：它是異步調用，JS會在它沒有得到遠程服務器的值之前，就往下執行了，會導致下面的值並不是你想要的。比如：

var str="";
$.get("home/serTime",function(data){str=data;});
alert(str);

你會發現最後的str並不是從服務器中取回來的結果。因爲在服務器還未得到值之前，就已經alert了。但是如果你第二次執行這個語句的話，就會得到上次從服務器返回的內容。

解決這個問題的方法有2種：第一：

$.get("home/serTime",function(data){alert(data);});

或者，用下面的辦法。

② 用$.ajax代替簡化版的$.get

$.get 相當於：

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

get傳輸參數的用法：

$.get("test.php", { name: "John", time: "2pm" } );

$.ajax的用法：

$("#ButAjax").click(function() {
            $.ajax({
                type: "POST",  //默認是GET
                url: "/AjaxTest/getPerson",
                data: "ID=1&FirstName=C&LastName=HY",
                async: true,  //異步
                cache: false, //不加載緩存
                success: function(obj) {
                    alert(obj.ID + obj.FirstName + obj.LastName + obj.Man);
                },
                error: function() {
                    alert("請求失敗");
                }
            });
        });

$.get和$.ajax，默認都是異步調用的。所以如果想讓JS語句在本句執行完之後，再執行下一條語句，可以把async設爲false，即不要異步調用。所以，同樣的：

var str="";
$.ajax({url:"home/serTime",async:false,success:function(data){str=data;});
alert(str);

這樣，其結果就是你想要的了。

所以，如果以後在頁面處於打開的狀態下，再點擊按鈕，想要給什麼控件賦值的話，就要記得把async改爲false。

3、void(0) 的意思

在<a>標籤中，廢除原來的鏈接，而使用JS函數的方法有2種。

①<a href="#" οnclick="myclick()">鏈接</a>

②<a href="javascript:void(0)" id="dd1">鏈接</a>。 如果是這種情況的話，就需要在JS中寫：

$(function(){
  $("#dd1").click(function(){alert("這是個鏈接");});
});

二、easyUI 部分

1、寫法

easyUI可以有2種寫法。一種是直接寫標籤，方法是在標籤中加入： class="easyui-類型"，如class="easyui-tabs"。但奇怪的是，所有引入的css和js文件中，都沒有這些"easyui-tabs"的定義，可能是他們把這些類給斷開寫了吧； 另外一種寫法是現用標籤寫個簡單的input 或 div，然後在JS文件中寫代碼，如：

$("p").panel()

2、easyUI 的屬性、方法、事件、構造函數

①在JS寫UI的構造函數時，好像只能（我是這樣看的的）寫JS的屬性或事件，如：

$('#tt').tabs({
    border:false,
    onSelect:function(title){alert(title+'is selected');}
});

②屬性的取值、賦值 寫法

如：$('p').panel().title

以上這個寫法只是取值的寫法。如果需要賦值，還是需要再寫一遍構造函數，如：$('p').panel({title:"這是改變後標題"}); 通過這樣的方式，就可以只更改一個屬性，其他屬性不變。

③方法的寫法

無參數方法的寫法： $('tt').tabs('getSelected');

有參數方法的寫法：$('p').panel('move',{left:100,top:100} );

3、Tabs 插件

Tabs就是多個 panel 的組合。在實際中，添加tab的方法如下：

function addTab(tit){
  if(!$('#tt').tabs('exists',tit)){ //看這個title是否存在
  $('#tt').tabs('add',{title:tit, content:'Tab Body' });
} }

4、DataGrid 編輯

①分頁語句：

select * from(   
   select rownum r,  field1,field2 from table_name where rownum <= page* rows
   )     where r > (page-1) * rows

②雙擊行，進行操作

在構造函數中寫：

onDblClickRow: function() {
    var selected = $('#test').datagrid('getSelected');
    if (selected){
      window.open("DataView.action?Id="+selected.ID);
   }} 

③刪除

function DelAff(){
   $.messager.confirm('確認','是否真的刪除?',function(r){
   if (r){
   var selected = $('#test').datagrid('getSelected');
   if (selected){
      var index = $('#test').datagrid('getRowIndex', selected);
      $('#test').datagrid('deleteRow', index);
    DeleteSubmit(selected);
   }
   }
   });
  }
  function DeleteSubmit(selected)
  {
       var url="DataDelete.action?Id="+selected.ID;
       $.post(
       url     
     );
  }       

這樣頁面的刪除和數據庫中的刪除都實現了。