EasyUI----jQuery

如果==方法==是有参数的可以这么写成{}--进行参数的选择性传递.

1.属性和事件是直接在{ 属性/事件：xxx}里面用的.
2.方法是直接使用的.

主要查看API参考文档
帮助我们省去发送Ajax和css的样式描述

1.导入css和js

2.插件学习

   1.linkbutton

---两种方式
<a href="#" class="easyui-linkbutton">123</a>
----------------------------------------------
<a id="id1" href="#">234</a>
<script>
    $("#id1").linkbutton();
</script>

属性

基于标签规范

< a href=“#” class=“easyui-样式名” data-options=“属性名：值，…'”>123 < /a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit'">123</a>

基于编程规范

$().标签名（{
属性名:值，
属性名:值
}）

  <a id="id1" href="#">234</a>
  
 $("#id1").linkbutton({
        iconCls:'icon-clear'
    });

事件

基于标签规范

href=“#” class=“easyui-样式名” data-options=“属性名：值，事件名:事件函数名 ,…'”>123 < /a>

<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',onClick:aaa">123</a>
 function aaa(){
        alert("1234555555555555555")
    }

基于编程规范

$().标签名（{
属性名:值，
属性名:值,
事件名:function(){
}
}）

<a id="id1" href="#">234</a>
 $("#id1").linkbutton({
        iconCls:'icon-clear',
        onClick:function (){
            alert("12313321312！！！！！！！！！！！！！！！！！")
        }
    });

方法

调用模板

$(“标签”).easyui标签（''方法名”，方法传入的参数）

 $("#id1").linkbutton({
        iconCls:'icon-clear',
        onClick:function (){
           $("#id1").linkbutton('resize',{
               width:100,
               height:32
           })
        }
    });

   2. 面板 panel

标签： 使用 ------div
插件方法：

• 1.class =easyui-panel
• 2.$(“div”).panel()

   3. 窗口 window

标签 ：div
样式名：easyui-window
插件方式名 $(“div”).window()

window继承自panel

   4. 对话框 dialog

标签:div
样式名:easyui-dialog
插件方法名:$(‘div’).dialog()

<div id="test">测试用例</div>
    <div id="test1"  >
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-ok'">登录</a>
        <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-cancel'">取消</a>
    </div>
    
     $("#test").dialog({
        iconCls:'icon-ok',
        width:500,
        height:300,
        title:'测试用例',
        modal:true,
        buttons:'#test1'//显示在下面
    });

   5 消息框 message

$.message.show /alert()…

如果方法是有参数的可以这么写成{}–进行参数的选择性传递.

  function Test1(){
       $.messager.alert({
           title: '错误提示',
           icon:'error'
       })

2.Form表单 —记住

    1.from 表单（记住）

标签 form
样式名：easyui-form
插件方法名:$(‘form’).form()

        1.属性

        2.事件

1.onSubmit 在提交之前触发 ，返回false终止提交
$('from').form({
	onSubmit:function(){
		return false  //终止提交
		return true  //允许提交
}
})

2.表单提交成功，且服务器正常响应回浏览器执行
sunccess:function(data){
	// 表单执行成功的执行
	str参数，是服务器响应给浏览器的json字符串数据。
	JSON.parse(data)  //转换成json对象数据
}

        3.方法

1.submit   提交表单    --默认异步提交
$('from').form(‘submit’）
2.submit   清空表单数据    
$('from').form(‘clear’）
3.load    将数据填充到表单中
   第一种       1.$('from').form(‘load’,js对象）
   第二种      将控制器url响应回的对象的js串格式数据，转换为js对象，自动添加表单中 
   2.$('from').form(‘load’,Controller的地址即可;
   --前提是contoller响应回的是json对象
 

    2.textbox 文本框

html标签 ：input :text
样式名：easyui-textbox
easyui插件方法：$(“input”).textbox()

  $("#username").textbox({
        required:true,  //将其定义为必选
        missingMessage:'请输入汉字',  //文本未填写时提示信息
        validType:'length[3,10]',  //验证规则 ’url‘,'email' 'length[min,max]'
        //分为单条件验证 ’url‘,'email' 'length[min,max]'
        //多条件验证  ['url','length[min,max]']
        invalidMessage: "验证无效时出现的提示", //验证无效时出现的提示
        readonly:false , //仅为只读
        multiline:true, //将其变为多行
        width:300,
        height:100,
        buttonText:'搜索', //显示按钮
        buttonIcon:'icon-search',//添加图标
        // onClickButton:function (){
        //     $.messager.show({
        //         title:"gotoschool"
        //     });
        //     //获得内容                      ------------方法
        //     var t= $("#username").textbox('getValue');
        //     console.log(t);
        //     //清空内容
        //     $("#username").textbox('clear');
        //     //发送ajax请求
        // }
        onClickButton:function (){
            var t=$(this).textbox('isValid');
            if(t){
                console.log("发送Ajax请求");
            }else {
                console.log("发送失败");
            }
        }

   3.numbertbox 数值输入框

html样式 :input:text
样式名:easyui-numberbox
插件方法：$(“input”).numberbox()

   4.datebox 日期输入框

html样式：input:text
样式名:easyui-datebox
插件方法:$(‘input’).datebox()

 $("#test").datebox({
        required:true, //是否为必填
        editable:false, //是否定义用户可以输入到文本框里
        
    })

   5.filebox 文件框

html标签：input:text
样式名:easyui-filebox
插件方法:$(“input”).filebox()

   6. Combobox 组合框 （下拉列表框）

3.数据表格-datagrid

   1.显示数据

按照html标签的形式创建table表格
使用 $(‘table’).datagrid()

列属性---------------------注意不是属性是列属性

sortOrder：true 排序
作用：
-------效果：列可以被点击
--------点击：自动请求datagrid的url,而且携带请求参数： sort=该列的field&order=asc或者desc
服务器的修改：
控制器接受sort 和order参数。

hidden 该列消失

formatter:
-----datagrid在渲染每行数据的时候，会调用一次该函数。
会将row ,index,value参数传给函数
会将function的返回值，显示在当前列的位置
row 当前列的值 -----value是json数据------index是下标

事件

onLoadSuccess —当数据加载成功时触发。

   2.分页查询

使用pagination:true实现分页查询

3.批量删除

4.添加操作

   方法介绍

1.reload:
---------------------重新加载数据 ，会携带上一次请求的所有参数。
2.load
---------------------重新加载数据 ，会携带上一次请求的所有参数。但是分页的参数只会携带第一页的参数
3.getChecked 返回复选框选中的所有行
可以做批量删除操作 返回的是选中行的json数据