jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。
创建静态文件,现在setting里配置静态文件:
在APP创建urls文件,在项目urls中配置:
在jQuery EasyUI手册里找到需要的文件导入进来,
创建页面,在demo中找到layout下面的basic打开代码,将里面的head中的代码粘来,源代码是相对路径,如果找不到网页,将其改为绝对路径。
将手册里的layout中的第一个代码粘过来,改成你需要的:
我们的树需要动态生成,不能写死,我们都是使用ajax实现,没有表单提交。
第一行代码粘过来:
第二行代码,需要放在head里的工厂函数中:平时都是.ajax这里是.tree 自己封装了。
在手册中进入demo找到tree_data的文件,导入到同目录下的静态文件中。
我们将其中的代码进行删改,留下我们想要的样式。
最小的一个树:
外面为什么是大括号,因为我们要转换成json文件,必须是字典形式。
将工厂函数中tree中路径写在后台,用ajax读取,树动态加载,从数据库读取。
页面:
在APP里配置路径:
在views写方法:
这样写完后会出现一起加载的情况:
在models创建表,在setting里配置数据库信息:
因为我们要实现树通过数据库里面的数据自动生成,所以之前在views里的方法就不适用需注释,但是读取所有后,计算机不确定有多少个子节点,无法将之前的代码直接搬进来,所以我们这是使用递归(递归:自己方法调用自己方法)
我们修改了queryTree里面的方法,让树通过数据库里数据自动生成。并且没有重复加载节点,现在有点,把id传到后台查到当前。
显示右边表格与左边菜单关联:
表格创建:参考手册表格数据里的数据表格
还要将locale拷进(本地化):还在页面导入,需要在页面导入:
在views里配置自动生成输的方法:
在页面加上业数据库表中一致的字段,里面的字段名如果不同,就会报错。
现在我们就已经实现了,将数据库中的物品通过后台方法,展示在页面上,目前还没有实现菜单与表格关联:
现在实现点击菜单,出现相对的表:
触发事件,点击表单将返回数据,现在需要将数据传回后台进行查询
后台方法需要获取:
现在实现点击菜单可以显示右边的表格,但是如果物品在二级以下,点击菜单一级,表格是不会出现数据的。
写了这个递归的方法,现在全局定义这个,查询id,如果大于0,找分类,循环后,调用自己的方法,将id传过去,否则循环遍历将这个id存进去。
现在已经实现,点击一级菜单,表格出现数据,现在来实现分页(在手册数据表格里有分页的代码):
将分页的属性添加在加载表格的函数中,页面表格显示分页效果;
属性:pageSize的值必须从pageList里面选,如果不存在pageL,序号就会显示NaN
![](https://i-blog.csdnimg.cn/blog_migrate/966c55bd7dcb4cd5910c22309a5bd347.png)
写完这些属性后,需要把当前页和每页显示的行数传到后台,只查当前页的集合:
要去页面加载表格路径里去根据分页查,在queryGrid方法里先获取当前页和每页最大记录数,在根据起始索引进行分页。这样在页面的分页功能就可以实现了。如果gridJson={"total":len(goodsSet)}里面不是goodsSet的长度,到了末端,页面还是可以显示点击下一页。
现在在实现排序功能:
还要在排序字段的后面加上sortable这个属性。是否允许排序
这个属性添加后在页面出现图标,但是没用功能呢,去后台写方法:
现在就可以排序功能,以某一个字段为主进行排序,现在我们实行添加功能。
先在加载表的函数里写上添加和编辑的样式,
紧接着定义一个窗口函数:
因为打开的是一个新的窗口,所以div是不能写在原有div里,需额外写:
现在需要在打开的新窗口里添加表单和保存到数据库的功能:
到数据填写完后,再点击保存的时候,触发事件,将数据进行提交:
在后台写上与路径对应的方法:
因为id写死了,所以添加的商品将默认到那个父级下。
在引入是也存在一定的顺序:
在Easyui引用js时,要先引入jquery.min.js,其次是jquery.easyui.min.js。最后是easyui-lang-zh_CN.js,存在顺序关系。
引入easyui-lang-zh-CN.js后,相应的提示信息也会改变,同时改变这两个控件日期默认显示格式。
现在实现点击增加时,出现树(手册中在表单有树形下拉框这个样式),我们使用JavaScript创建树形下拉框,id不能相同。
在函数里写上发法,什么时候加载:
后台获取前台页面点击的id,传给后台:
在进行添加商品时,就可以选择商品的类,进行分类添加保存。