html,jqueyEasyui,layui的i常用界面

文章的主要内容

1. html
2. jqueyEasyui
   注意：表单和数据表格都还涉及到回显问题，所以每一个都有提供对应的数据格式化和解析方法
   表单里面组件获取其他组件的值，都有有对应的方法（表格不知道，应该有）

• 简介

• 数据表格

• 树 tree

• 表单

3. layui

html

jqueyEasyui

• 简介
  标签要声明class(表示所属哪个知识点)，属性定义在标签里面的data-options选项中或者写在script中
  jqueyEasyui是基于juery,即渲染时或者初始化以jquery对象.起头
• 数据表格
  分页请求时一定会发这两个参数
  page参数：当前前台请求数据的当前页号
  rows参数：每页显示的条数
  响应时返回数据的总条数，和数据信息即可
  1.组成结构：表格，工具条，工具栏（基于LinkButton），复选框，单选框，分页栏
  url，columns，toolbar（方式：array,selector），pagination（boolean值），formatter，checkbox（boolean值），singleSelect:true, //true单选（这个文档没写，只能百度了），queryParams（在请求远程数据的时候发送额外的参数，json对象）

顶部工具栏的DataGrid面板。可能的值：
1) 一个数组，每个工具属性都和linkbutton一样。
2) 选择器指定的工具栏。 
在<div>标签上定义工具栏： 


$('#dg').datagrid({
	toolbar: '#tb'
});
<div id="tb">
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a>
<a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a>
</div>

通过数组定义工具栏：

$('#dg').datagrid({
	toolbar: [{
		iconCls: 'icon-edit',
		handler: function(){alert('编辑按钮')}
	},'-',{
		iconCls: 'icon-help',
		handler: function(){alert('帮助按钮')}
	}]
});

单元格formatter(格式化器)函数

单元格formatter(格式化器)函数，带3个参数：
value：字段值。
rowData：行记录数据。
rowIndex: 行索引。 
代码示例：

$('#dg').datagrid({
	columns:[[
		{field:'userId',title:'User', width:80,
			formatter: function(value,row,index){
				if (row.user){
					return row.user.name;
				} else {
					return value;
				}
			}
		}
	]]
});

2.事件
点击一个单元格的时候触发，双击一个单元格的时候触发，双击一行的时候触发，点击一行的时候触发，选择一行的时候触发，取消选择一行的时候触发，选择所有行的时候触发，取消选择所有行的时候触发，开始编辑一行的时候触发，完成编辑一行的时候触发，取消编辑一行的时候触发，右击一行记录的时候触发

事件继承自panel(面板)，以下是DataGrid新增的事件。

事件名 参数 描述 
onLoadSuccess data 在数据加载成功的时候触发。 
onLoadError none 在载入远程数据产生错误的时候触发。 
onBeforeLoad param 在载入请求数据数据之前触发，如果返回false可终止载入数据操作。 
onClickRow rowIndex, rowData 在用户点击一行的时候触发，参数包括：
rowIndex：点击的行的索引值，该索引值从0开始。
rowData：对应于点击行的记录。 
onDblClickRow rowIndex, rowData 在用户双击一行的时候触发，参数包括：
rowIndex：点击的行的索引值，该索引值从0开始。
rowData：对应于点击行的记录。 
onClickCell rowIndex, field, value 在用户点击一个单元格的时候触发。 
onDblClickCell rowIndex, field, value 在用户双击一个单元格的时候触发。 
代码示例：

// 在双击一个单元格的时候开始编辑并生成编辑器，然后定位到编辑器的输入框上
$('#dg').datagrid({
	onDblClickCell: function(index,field,value){
		$(this).datagrid('beginEdit', index);
		var ed = $(this).datagrid('getEditor', {index:index,field:field});
		$(ed.target).focus();
	}
});

 
onSortColumn sort, order 在用户排序一列的时候触发，参数包括：
sort：排序列字段名称。
order：排序列的顺序(ASC或DESC) 
onResizeColumn field, width 在用户调整列大小的时候触发。 
onSelect rowIndex, rowData 在用户选择一行的时候触发，参数包括：
rowIndex：选择的行的索引值，索引从0开始。
rowData：对应于所选行的记录。 
onUnselect rowIndex, rowData 在用户取消选择一行的时候触发，参数包括：
rowIndex：选择的行的索引值，索引从0开始。
rowData：对应于取消选择行的记录。 
onSelectAll rows 在用户选择所有行的时候触发。 
onUnselectAll rows 在用户取消选择所有行的时候触发。 
onCheck rowIndex,rowData 在用户勾选一行的时候触发，参数包括：
rowIndex：选中的行索引，索引从0开始。
rowData：对应于所选行的记录。
（该事件自1.3版开始可用） 
onUncheck rowIndex,rowData 在用户取消勾选一行的时候触发，参数包括：
rowIndex：选中的行索引，索引从0开始。
rowData：对应于取消勾选行的记录。
（该事件自1.3版开始可用） 
onCheckAll rows 在用户勾选所有行的时候触发。（该事件自1.3版开始可用） 
onUncheckAll rows 在用户取消勾选所有行的时候触发。（该事件自1.3版开始可用） 
onBeforeEdit rowIndex, rowData 在用户开始编辑一行的时候触发，参数包括：
rowIndex：编辑行的索引，索引从0开始。
rowData：对应于编辑行的记录。 
onAfterEdit rowIndex, rowData, changes 在用户完成编辑一行的时候触发，参数包括：
rowIndex：编辑行的索引，索引从0开始。
rowData：对应于完成编辑的行的记录。
changes：更改后的字段(键)/值对。 
onCancelEdit rowIndex, rowData 在用户取消编辑一行的时候触发，参数包括：
rowIndex：编辑行的索引，索引从0开始。
rowData：对应于编辑行的记录。 
onHeaderContextMenu e, field 在鼠标右击DataGrid表格头的时候触发。 
onRowContextMenu e, rowIndex, rowData 在鼠标右击一行记录的时候触发。 

3）重载

load param 加载和显示第一页的所有行。如果指定了'param'，它将取代'queryParams'属性。通常可以通过传递一些参数执行一次查询，通过调用这个方法从服务器加载新数据。
$('#dg').datagrid('load',{
	code: '01',
	name: 'name01'
});

 
reload param 重载行。等同于'load'方法，但是它将保持在当前页。 

• 树 tree
  1.最基本的参数

1、初始化tree的url：
/item/cat/list
2、请求的参数
Id（当前节点的id，根据此id查询子节点）
3、返回数据的格式json数据：
[{    
    "id": 1,    //当前节点的id
    "text": "Node 1",    //节点显示的名称
"state": "closed"    //节点的状态，如果是closed就是一个文件夹形式，
                 // 当打开时还会 做一次请求。如果是open就显示为叶子节点。
},{    
    "id": 2,    
    "text": "Node 2",    
    "state": "closed"   
}] 

2.其他参数

1).判断节点是否是叶:
方法1： $(’#domaincatalog’).tree(‘isLeaf’, node.target); 返回true或false ，true表示是叶节点， false即不是

方法2：官方文档中：看到每个节点都有一些属性，其中一个是state，我们就通过这个state来判断。state有两个值 open和closed表示当前节点 打开和关闭了树的状态。当state等于undefined的时候就表示当前节点是Leaf 叶了。
参考文章：https://www.cnblogs.com/soundcode/p/5015467.html

3.事件
点击一个节点的时候触发，双击一个节点的时候触发，右键点击节点的时候触发，编辑节点之前触发，编辑节点之后触发，取消编辑操作的时候触发
4).方法
追加若干子节点到一个父节点： append

append param 追加若干子节点到一个父节点，param参数有2个属性：
parent：DOM对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。
data：数组，节点数据。

代码示例：

// 追加若干个节点并选中他们
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
	parent: selected.target,
	data: [{
		id: 23,
		text: 'node23'
	},{
		text: 'node24',
		state: 'closed',
		children: [{
			text: 'node241'
		},{
			text: 'node242'
		}]
	}]
});

 

重载：reload

• 表单

1.使用$.fn.form.defaults重写默认值对象
form提供了各种方法来操作执行表单字段，比如：ajax提交, load, clear等等。当提交表单的时候可以调用validate方法检查表单是否有效。
2.

<form id="ff" method="post">   
    <div>   
        <label for="name">Name:</label>   
        <input class="easyui-validatebox" type="text" name="name" data-options="required:true" />   
    </div>   
    <div>   
        <label for="email">Email:</label>   
        <input class="easyui-validatebox" type="text" name="email" data-options="validType:'email'" />   
    </div>   
    ...    
</form>  

url,

属性名                   属性值类型                               描述                                      默认值 
url                          string                          提交表单动作的URL地址                          null 

4.事件：

事件名                   参数           描述 
onSubmit               param        在提交之前触发，返回false可以终止提交。 
success                data           在表单提交成功以后触发。 
5.方法：

5.方法

6.里面其他组件
①日期组件
注意：表单和数据表格都还涉及到回显问题，所以每一个都有提供对应的数据格式化和解析方法


missingMessage：string类型，表示 当文本框未填写时出现的提示信息。
②DateTimeBox（日期时间输入框）【继承DateBox】
layui