========================
EasyUI
引入easyUI的2种方式
布局,在easyUI的api直接复制即可
现在我们需要这样的布局
删掉南和东即可
data-options就是样式
让布局占满整个窗口,最开始的只有固定的大小, fit:true是自适应body
分类的框
默认第2个被选中,selected:true
系统菜单里显示上面的分类框,直接在div里套即可
现在还比较窄,加一个自适应即可
选项卡
有个小图标,是刷新用的,点击后就会弹出refresh,如果不想要这个,那么删掉tools属性即可
记住最后一个属性是没有逗号的
但是上面可以无限点击并且无限选项夹,所以需要一个判断
点击客户管理,在数据区域会显示选项卡
新增一个固定的欢迎页面
去掉下划线
关键是通过样式来获取a标签里的内容
上面的效果是每点击一个标签,都会显示这个标签标题相同标题的选项卡
接下来就是把对应的数据显示到对应的页面去
直接跳转到那个页面即可,这个页面会内嵌到右边的框里
所以js里还需要获取路径,并且传给函数
函数里直接填入链接即可,但是这样会跳转到新页面,所以应该还有处理措施
但是我们发现,url并没有被解析,也是直接作为内容显示出来了
可以执行一个函数,函数就是返回字符串
iframe也是一个标签,这个src能发送一次请求,经常用来隐式发送,style把border改成0px就看不到iframe了
现在就可以填入url了
表格组件
接下来是数据表格组件,比较重要
json数据
可以加属性
这是列属性
这是表格的属性,列的属性和列的属性是同级的,所以应该是加个逗号,在后面加属性
分页栏
上面是显示英文的,只要加入中文js即可
逗号隔开,可以加其他的东西
我们发现文本是通过逗号隔开的,具体的参数,看api文档即可
直接返回标签链接即可
后台环境的搭建
搭建一个xml配置文件的基本ssh框架即可,除去了struts2配置文件的
列表显示的后台代码编写
这是页面的准备
再action里
在service里
修改json
把查出来的数据转换成json数据
显示数据
窗口的组件
现在我们需要一点击添加就弹出一个窗口,现在还需要在列表的上面添加一个添加的按钮
和分页是同级的
添加一个div窗口,默认是隐藏的
现在编写save函数提交表单
onSubmit的数据校验先去掉
我们返回回来的数据是字符串类型的,而这个success没有自动处理json,为了让js可以识别,必须要转换一下
这个关闭窗口和表格重新加载应该是在success的里面,这里标记有问题
然后就是修改删除,修改和上面是差不多的,删除就更简单了,发送一条语句过去就行
