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     
     );
  }       

这样页面的删除和 数据库 中的删除都实现了。