ssmspring+ springmvc + hibernate的 列表展示数据

spring+ springmvc + hibernate的列表展示数据

1.导包（引进css样式和js文件库）

2.在前端进行引用，并书写script代码

（实现对json字符串的前端界面的显示）

---

<script>

function init(){

$("#frist").datagrid({

title:"用户管理",

url:"findAllUser.do",

columns:[[

{field:"users",title:"账号",width:},

{field:"pwd",title:"密码",width:}

]],

toolbar:[

{field:"",iconCls:"icon-remove"}

]

})

}

$(init)

</script>

---

datagrid --可以理解为一个定义表格的方法

title -- 表格的标题

url -- 表中数据的来源地址（路径）

columns -- 表的列数

toolbar -- 工具栏

3.由Dao层进行数据库查询，并把结果以集合的形式返回给Controller，由controller把结果转变为json字符串。

a.导入fastjson.jar包。

b.在spring.xml中进行json的配置

---

<mvc:annotation-driven>

<!-- json的配置 -->

<mvc:message-converters>

<bean

class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">

<property name="supportedMediaTypes">

<list>

<value>text/html;charset=utf-8</value>

<value>application/json</value>

</list>

</property>

</bean>

</mvc:message-converters>

</mvc:annotation-driven>

---

用户的添加与删除

1.删除

a.通过jq添加删除按钮

b.给删除按钮添加事件

---

toolbar : [

/* 添加按钮时，用text

handler:function(){}处理点击事件

*/

{text : "删除",iconCls : "icon-remove",handler : function() {remove2();}}

]

---

c.通过异步传递的方式把数据传递给controller进行业务处理。

d.将结果值返回给前端并进行数据的重新加载。

在此中用到的异步传递方式是：

---

//获取选择的数据 (记录)

var data = $("#first").datagrid("getSelected");

/*

get 发送异步请求到removeUser.do，

id是参数，d是返回值

function(d){}是回调函数

*/

$.get("removeUser.do", {id : data.id}, function(d) {

if (d == 0) {

//重新加载数据

$("#first").datagrid("reload");

}

});

---

2.添加

a.通过jq添加添加按钮

b.给删除按钮添加事件

---

toolbar : [

/* 添加按钮时，用text

handler:function(){}处理点击事件

*/

{text : "添加",iconCls : "icon-add",handler : function() {toAdd();}}

]

---

//点击添加是显示div

function toAdd() {

$("#user-window").window("open");

}

---

创建一个新的div用于填写添加的用户信息（在本页面），给div添加样式

---

<div id="user-window" style="width:400px;height:300px"

class="easyui-window" data-options="closed:true,modal:true">

//将div居中

<div style="width: 100%;height:100%;display:flex;justify-content:center;align-items:center">

<form id="user_form" action="addUser.do">

<input type="text" name ="users" class="textbox"/><br/>

<br/>

<input type="password" name="pwd" class="textbox"/><br/>

<br/>

<div style ="text-align:center;margin: 0 auto">

<a class="easyui-linkbutton" href="javascript:save()">保存</a>

</div>

</form>

</div>

---

解释 data-options="closed:true,modal:true"

modal 是否将窗体显示为模式化窗口

closed 是否可以关闭窗口

class="textbox"

添加样式，将文本框设置为半圆角

---

c.通过异步传递的方式把数据传递给controller进行业务处理。

d.将结果值返回给前端并进行数据的重新加载。

在此中用到的异步传递方式是：

---

//success 成功是执行的方法

$("#user_form").form("submit",{

success:function(d){

$("#first").datagrid("reload");

$("#user-window").window("close");

}

---

未完待续……