easyui学习笔记.docx

Easyui学习笔记-------郑相弼仅以此送给和我同样的初级程序员。

Application1calss=“easyui-datagrid”这个class的样式就是一条横线如图2pagination=“true”这个样式的功能是一个分页查询的‘模具’如图3rownumbers=”true”这个样式是分页查询模具上方多出一快行高的距离如图4现在就要准备在分页上先创建好每一个名字了，首先我起了one two three 三个field 名，如图而这其中的fistname这些名字在页面上的显示就如下图5class=”easyui-lingbutton”是一个正方形的按钮iconCls=”icon-add”是一个+号的显示如图：6plain=“true”是隐藏方块当点击+号的时候方形背景就是显示反之则不会显示如图7编辑删除和增加是一样的只不过iconCls=”icon-add”是增加而 iconCls=“icon-edit”是编辑 iconCls=“icon-remove”是删除 plain=“true”的功能是一样的都是让方形隐藏显示如图：8toolbar=“#toolbar”这个样式主要是让增加修改和删除的id对应让他们保持在上边如图：如若不用这个样式就不会出现在这里反而出现在下边了。

建议多多反复使用练习，你就会发现easyui没什么难的地方。

9class=”easyui-dialog”这样样式主要是做什么的呢？看到没有，是的，你发现没有他会出现新的页面，我们可以这么认为，并且第8个和这个还可以一起利用起来做一个简单的东西。

如图：接下来是和第8个合在一起做的练习，请看。

如图：这里让我很奇怪为什么a这个修改不会跑进newdlalog里面的左上角，此处有待共同观察。

10这里主要以一个demo 一个demo 现做先说希望广大学友能耐得住寂寞，因为谁都是这么过来的，继续现在有出现了这么个样式，class=“easyui-validatebox“这是做什么的呢？想要看到效果，就必须要和javascript配合了。

如图：那么最上边div里的buttons 和closed是什么意思呢？躺着你不用这俩个写上的话，页面效果是一出来就这样。

如图：这个是application 大体也就这些，下面来学习tree。

tree1 首先，让我们来创建个名字，就按照demo中的来，起名为Basic TreeClass=”easyui-panel”还有 class=“easyui-tree”这俩个样式是什么用的呢第二个一看就明白和我们的主题有关就是一个树而第一个则是面板的意思。

如图：例子那么这个li中的data-option“state：‘closed’”是什么意思呢？这个意思是指如果你没有写这个的话页面的展示就是开着的所以必须写这个就会让他包起来，这样才合理不是么。

基本上tree也就是这样了很简单。

简单明了。

希望能看到这个笔记的人能和我共同进步。

为了美好的未来。

我也是新手不可能面面俱到，所以有些说的不明了的地方请多包涵。

谢谢。

也请批评指正。

3 Basic TreeGrid这是在查询页面里的tree，一起来看下。

如图：这个貌似得和后台交互json才可以哦，fuck！这是get请求传到这个查询里的，还记得这个rownumbers：true吗？看到写name的这一块像多出来的地方了吗这就是他的作用。

url是路径 method是get请求这个field是对应起来的id 和树的name 而下面的则是在rownumbers块上现在的首列名。

Layout1 看这个之前先解决一个问题，看图：看见这个名字了吗？就针对这个名字显示easyui就提供了俩种写法这是根据easyui版本特性来的建议使用上边这种的下边的是老版本了，1.30的老版本。

那么好，我们继续来看这个layout，顾名思义，听词的含义是布局，是的，easyui 不会随便为demo起个名字的，肯定是有其意义在里边。

我们看这个例子如图：看见我箭头所指的区域了吗，没错这就是布局，west是西，反之east就是东了。

这个布局的结构是，直观的看是分为了5个是吗，最上边的空白区域就是一块，然后是西，中央显示信息的也是一块，然后是东，最后是下边空白的区域，因为这个页面是可以操控变化的，如图：看见了吗，东西两块是可以伸缩的，所以之前的什么5块只是之前的，这就属于与时俱进这个成语的意思，当伸缩西边的时候，布局就分为了4块是吧，东边同理，那么是怎么做的呢，接着看代码。

让我给你做一遍。

当你写上class=“easyui-layout”并写法宽高的时候他是不出现在页面上的，而这下面这图则是这北南东西四个顺序写出来的现在就形成了这个小型的布局layout出来，我们继续，因为还有东西俩个东西没有伸缩功能呢，忘记了，中央的这个数据还没让他弄出来呢，想知道的话就一起来，let~go 先弄中央的这个数据显示吧当你为他东南西北都弄好布局后，千万别忘记了你的数据是要显示在哪里，当然是中央这一片区域了，所以我们在这个div里继续在写一个为<divdata-options=”region:’center’,title:’Mytitle’,iconCls:’icon-ok’”></d iv>看见了吗 region弄了一个中间部分就是那一块中央起了一个为Mytitle的名字icon按钮了。

当然不会显示的。

咦，title的名字不显示，好吧我的错，检测代码后发现title写错了，所以同胞们一定不要粗心大意哦！如果只是这样那可不行，因为这个布局可能有点小毛病，所以我们需要让他自适用宽度布局，fitColumns:true 这个标签是让他自适用窗口改变。

singleSelect:当true时只允许当前选择一行。

默认false。

说到这里，我讲解的只是个人的理解，所以我在网上找到了一个写属性特别全的大神的文章，链接发一下。

/article/26077.htm当然也可以继续看我的，如果你能看的懂的话。

嘿嘿！所以在那个中央代码写完后，在table记得一定加上这句话，不论你理解不理解，你只有认为这么写会让窗口列表显示不会出现什么问题就行了。

像这个数据问题只能看你后台代码里写的了，table里的url记得吧方法看你用get还是post其他的不变就行。

Ok这个地方就讲这么多，本人虽然文采挺好，但说这个可不行，一定会有人喷我，但不要紧，懂我的人迟早会懂我！Basic Form现在来写写表单页面，我们先来看看图：这是个看起来简单的表单，你不要主观认为简单就不去学了，但让你不看demo能写的出来吗，是吧所以还是看吧！首先，让我们先来创建一个能够承载这个表单申请的面板，所以就要先创建个div 在里面设置一个class=“easyui-panel”面板起个shou的名字设置一下宽度。

Ok了如图：创建好面板之后，建立个表单吧，看见了吗，只有记住其中几点就好了，创建表单这是属于easyui的input框所以class=“textbox”data-options=“required：true“指必须在输入框里输入东西否则就会红色，但是要为表单设置一下cellpadding 意思是让单元格边距对齐在一起不设置这个会乱的。

接下来继续。

因为确实挺烦的一堆重复性代码所以现在复制了。

- - 嘿嘿在form外现在可以外一个表单写确认删除按钮了这里有个小问题，我发觉还是按照他们easyui上的一样写的好，因为我刚才所尝试自己命名完全不行，没有反应，这地方就按照他们原样来好了，今天就说到这里。

明天继续。

谢谢包容海涵。

首先，先来看看图：看到明显有别与之前的功能了吗，这红色箭头所指的就是，那么这是如何实现的呢，让我们做一遍，在做之前，username email url和phone怎么实现的你还记得吗，不记得没关系，希望这次在做一遍能牢固一些。

那么开始吧！首先还是先写一个面板。

创建一个div 设置一个class=“easyui-panel“设置个style=”width：400px；接下来，为td填写姓名也就是申请表每个框前面的名字，例如第一个td里面要写上一个名字，第二个呢就为它设置个input框来接收它，他们是在一个tr里面的那么第一个input框里面的样式和用处是什么呢，首先这都是控件，easyui就是提供这东西的，class首先就是有区别的，记住一点当你用日期的时候就用下面这个而用平常的时候就上边的就可以上边的只用class是不行的你需要给他加一个data-options这个东东，因为例如用户名怎么可能允许你什么也不填就可以绕过注册成功呢。

而后面的validType这个是类似与正则表达式的样子，你按照他的模式，3~10个字符之前起名字。

如果不在3~10个之外，还会提示，别忘记为间距格子设置样式，首先在整个table里设置下cellpadding=“5“这样就不会那么拥挤了，但是，因为这宽度实在是宽，不合情理，所以才发现，原来是宽度设置了宽度，但没有写上px，我了个去，坑爹啊，所以一定要仔细！在直接cope demo里的两句，为了省事，在看看功能并且都好用，那么你觉得是不是很简单呢。

Basic NumberSpinner数值微调器，就是这么个小东西，那么它是如何做的呢，让我们做一遍，首先他不是面板也不是申请表只是一个数值器而已，所以就观看他的样子，也只是需要一个input框，还有个js之类的也就差不多了，看见了吗首先这里有一个样式，那就是class=“easyui-numbersprinner“这看字的表面就看的出来就是用来干这个的而date-options里面把js直接写在了里面，easyui是个灵活多变，简易学习的不同于extjs，最后在下面的div里设置个span 是为了显示value的值。

完成了。

class="easyui-datetimebox"这个样式也是一个日期类型的样式在input框里尝试一下即可得知。

Basic Messager接下来看看这个看看这个是怎么做的，一看就很明显，就是js效果，那么是如何做的呢？因为是四个按钮，我们要为他写js效果，抱歉，进度挡住了两个，无所谓，你知道有这两个就好，现在我们就先为a标签添加一下所需的东西。

看见了吗class=“easyui-linkbutton“抱歉，图上的漏泄了easyui，这个你别犯错就行了，因为我都是现写现做的，肯定老是有错误，遇到错误才是具有前进的可能性，就是一个按钮的样式为每个按钮设置一个onclick事件，为了下一步js的实现，接下来继续。

这是show的实现，而js是这样的应该能看懂吧，嘿嘿！而这第二个和show其实是一样的只不过多了一个timeout这是暂停休息的意思，如果你按了show的按钮当你在按slide的时候第一个会被覆盖，你可以多多尝试一下，demo例子官网上有名字我也给你了，呵呵接下来第三个12.页面上的效果就是下面这样的Ok，这个就说到这里。