外贸网站建设智能建站网站推广软件排名
如果==方法==是有参数的可以这么写成{}--进行参数的选择性传递.
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数据