项目的第二天，基本功能的实现

最新推荐文章于 2024-07-16 14:35:16 发布

chunniang8044

最新推荐文章于 2024-07-16 14:35:16 发布

阅读量163

点赞数

文章标签： json java javascript ViewUI

原文链接：https://my.oschina.net/u/4108565/blog/3070760

版权

功能二：用easyUI做一个主页面

1.页面布局 layout

Lalyout :依懒panel，resizable。

布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。

</div>

如果要填满整个网页：直接在body中，添加layout

split:true：可拖动边框。

我们在这里只是需要三个：

<font face="隶书" size="9"> 智能销售系统</font>

</marquee>

</div>

</div>

<p>我是主页面</p>

</div>

</body>

2.实现tree菜单

$("#menutree").tree({//添加菜单

method:"get",

url:'json/menuTree.json',

）}

3.点击菜单栏的菜单在中间添加一个panel

onClick:function(node){

//获取节点的名称，以及属性

var $text=node.text;

var $iconCls = node.iconCls;

$("#main").tabs('add',{//添加页面

title: $text,

iconCls:$iconCls,

content: '<div style="padding:10px">'+$text+'</div>',

href:'employee.html',

closable: true

})

}

4.点击主菜单不会显示

If(node.url):子菜单有url,主菜单没有

5.点击已经存在在主页面显示的菜单，不会再显示

//判断是否已经已经点击了

var tabspanel=$("#main").tabs("getTab",$text);

if(tabspanel){

//选中相应的面板

$("#mainUI").tabs("select",$text)}

功能三：实现用户管理界面

1.添加一个dataGrid显示所有数据

<table id="dataGrid" class="easyui-datagrid"

data-options="

url:'/employee/page',

fitColumns:true,

singleSelect:true,

fit:true,

toolbar:'#gao',

pagination:true">

<thead>

<tr>

</tr>

</thead>

</table>

1.显示头像

function gethead(value,row,index) {

return "<img width='60px' src='"+value+"' alt='没有头像'>"

}

2.部门下拉（下面有后台部门的代码）

部门:<input name="departmentId" class="easyui-combobox"

panelHeight="auto"

data-options="valueField:'id',textField:'name',url:'/util/dpartment'" />

function getdepartment(value,row,index) {

return value?value.name:"无部门"

}

3.高级查询

$(function () {

var datagrid = $('#dataGrid');

$("*[data-method]").on("click",function () {

var method=$(this).data("method");//拿到方法名字

itsource[method]();//根据方法名执行相应的方法

})

window.itsource={

search:function () {

//获取from表单的值

var par=$("#searchform").serializeObject();

//刷新页面

datagrid.datagrid("load",par);

}

})

功能四：添加部门

Domain

@Entity

@Table(name = "department")

public class Dpartment extends BaseDaomain {

private String name;

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

@Override

public String toString() {

return "Dpartment{" +

"name='" + name + '\'' +

", id=" + id +

"} ";

}

与employee建立多对一的关联（在employee中）

@ManyToOne(fetch = FetchType.LAZY)

@JoinColumn(name="department_id")

//Json Ignore(忽略) Properties(属性)

//@JsonIgnoreProperties(value={"hibernateLazyInitializer","handler","fieldHandler"})

private Dpartment department;

当设置了懒加载的时候会报两个错：

noSession:

原因：当我们在连表的时候配置了懒加载的时候，那么我们的在查询后就将session给关了

我们的department是懒加载，是需要的时候才去查询，但是我们的session已经关了，所以就会报一个nosession

解决：在web.xml中加上

<filter-name>openEntity</filter-name>

<filter-class>org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>openEntity</filter-name>

<url-pattern>/*</url-pattern>

</filter-mapping>

</web-app>

2.No serializer：这个问题在使用Springmvc+jpa中加懒加载一定会出现这个问题。

原因：因为SpringMVC会返回一些json数据，这些数据中有一些序列化要求。当没有懒加载对象时是没有问题的，现在使用jpa返回懒加载对象，它自动在里面加了一些属性来完成懒加载功能（"hibernateLazyInitializer","handler","fieldHandler"）。

解决办法一：麻烦，每一个关联都要写

在类上加属性：生成的时候把这个字段忽略了：

@JsonIgnoreProperties(value={"hibernateLazyInitializer","handler","fieldHandler"})

解决办法二：一次配置

创建一个新的类(重写com.fasterxml.jackson.databind.ObjectMapper)

package cn.itsource.aisell.common;

import com.fasterxml.jackson.annotation.JsonInclude;

import com.fasterxml.jackson.databind.ObjectMapper;

import com.fasterxml.jackson.databind.SerializationFeature;

public class CustomMapper extends ObjectMapper {

public CustomMapper() {

this.setSerializationInclusion(JsonInclude.Include.NON_NULL);

// 设置 SerializationFeature.FAIL_ON_EMPTY_BEANS 为 false

this.configure(SerializationFeature.FAIL_ON_EMPTY_BEANS, false);

}

在applicationContext-mvc.xml中配置

</property>

2.Pository

package cn.itsource.aisell.repository;

import cn.itsource.aisell.domain.Dpartment;

public interface DepartmentRepository extends BaseRepository<Dpartment,Long> {

}

3.Service

父类接口

子类实现

package cn.itsource.aisell.service;

import cn.itsource.aisell.domain.Employee;

import cn.itsource.aisell.query.EmployeeQuery;

import cn.itsource.aisell.service.IBaseService;

public interface IEmployeeService extends IBaseService<Employee,Long>{

}

import cn.itsource.aisell.domain.Dpartment;

import cn.itsource.aisell.domain.Employee;

import cn.itsource.aisell.service.IDartmentService;

import cn.itsource.aisell.service.IEmployeeService;

import org.springframework.stereotype.Service;

@Service//service不能继承的

public class DpartmentServiceImpl

extends BaseServiceImpl<Dpartment,Long> implements IDartmentService {

}

扩展功能一：排序

添加属性：sortable=true;

添加了这个属性，每一次一点击在前台就会传回sort,order

后台拿到这个数据给orderName orderType

//排序(前台传回来的是sort,order)

public void setSort(String sort){

this.orderName=sort;

}

public void setOrder(String order){

this.orderType=order;

}

由于我们已经写好了排序，这里个这两个自赋值，就可以直接使用了。

隐藏字段

1.到http://www.easyui-extlib.com/的grid部分找到

2.找到需要的js,css

3.查看元素,找到我们需要的js,css

4.拷贝js,css

5.将拷贝的放到项目中去

6.引入

7.根据扩展属性配置属性

转载于:https://my.oschina.net/u/4108565/blog/3070760

chunniang8044

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
项目的第二天，基本功能的实现

功能二：用easyUI做一个主页面1.页面布局 layoutLalyout :依懒panel，resizable。布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可...
复制链接

扫一扫