jQuery EasyUI最新试用版免费下载>

本教程演示了如何冻结一些列，当用户在网格上水平移动滚动条时，冻结列不能滚动到视图的外部。

想要定义冻结列，首先您应该定义frozenColumns属性。frozenColumn属性和columns属性是一样的。

$('#tt').datagrid({
title:'Frozen Columns',
iconCls:'icon-save',
width:500,
height:250,
url:'data/datagrid_data.json',
frozenColumns:[[
{field:'itemid',title:'Item ID',width:80},
{field:'productid',title:'Product ID',width:80},
]],
columns:[[
{field:'listprice',title:'List Price',width:80,align:'right'},
{field:'unitcost',title:'Unit Cost',width:80,align:'right'},
{field:'attr1',title:'Attribute',width:100},
{field:'status',title:'Status',width:60}
]]
});

学习大纲

一、了解Jquery

1.什么是jquery

Jquery 是一款优秀的JavaScript框架，它是一个轻量的JS库，它兼容CSS3，还兼容各种浏览器（IE6.0+,火狐1.5+,谷歌，safari2.0+等），使用Jquery让web开发变得更简单，例如：文档操作、文档选择、制作动画、事件处理、AJAX的使用以及其他的功能。

树形网格组件从数据网格中继承，但是允许在行之间存在父/子节点关系。许多属性继承至数据网格，可以用在树形网格中。为了使用树形网格，用户必须定义 'treeField' 属性，指明哪个字段作为树节点。

本教程将向您展示如何使用树形网格组件设置一个文件夹进行浏览。

创建树形网格

今天接触webpack，就着官网上的教程一步一步的玩，把自己的理解总结以便和大家交流

webpack的主要特点

1. 可以把js,css,image,甚至文本当成模块来处理，并通过require的方法来调用。

2. 能够自动识别模块之间的依赖。

webpack的安装,通常是使用npm。

创建一个文件夹vue-webpack-basic,使用命令行进入该文件夹，输入

jQuery EasyUI最新版下载>

本教程中涉及的示例演示了如何从服务器端加载数据，如何添加分页组件到数据网格中。

创建数据网格

想要从远程服务器端加载数据，首先你应该设置“URL”属性，服务器端会返回JSON格式的数据。查看数据文档可获得更多的数据格式信息。

数据网格经常需要合并多个单元格，本教程将教会您在数据网格中如何合并单元格。

合并数据网格的单元格，您只需要简单地调用'mergeCells'方法并传入合并信息参数，告诉数据网格如何合并单元格。在合并的单元格中，除了第一个单元格以外，其他的单元格在合并后会被隐藏。

创建数据网格

<table id="tt" title="Merge Cells" style="width:550px;height:250px"
url="data/datagrid_data.json"
singleSelect="true" iconCls="icon-save" rownumbers="true"
idField="itemid" pagination="true">
<thead frozen="true">
<tr>
<th field="productid" width="80" formatter="formatProduct">Product ID</th>
<th field="itemid" width="100">Item ID</th>
</tr>
</thead>
<thead>
<tr>
<th colspan="2">Price</th>
<th rowspan="2" field="attr1" width="150">Attribute</th>
<th rowspan="2" field="status" width="60" align="center">Stauts</th>
</tr>
<tr>
<th field="listprice" width="80" align="right">List Price</th>
<th field="unitcost" width="80" align="right">Unit Cost</th>
</tr>
</thead>
</table>

jQuery EasyUI最新试用版免费下载>

数据网格的工具栏不仅可以包含按钮，还能包含任何其他组件。用户可以通过已存在的div标签轻松定义工具栏布局，该div标签将成为数据网格工具栏的内容。本教程将向您展示如何为数据网格组件创建复杂的工具栏。

创建工具栏

创建数据网格

jQuery的介绍

学习目标

1、为了防止全局变量污染，把 jQuery 的代码写在一个自调函数中。

2、咱们平常使用的$实际上 jQuery 对外暴露的一个工厂函数。