前言：昨天與大家分享了EasyUi項目之登錄、注冊以及權(quán)限樹形展示，而今天的內(nèi)容是繼而昨天的內(nèi)容，進(jìn)行書籍的增刪改查。而今天也會講解到一個關(guān)于easyui的之前沒有分享的新的控件---combobox（下拉框）

一、明確目標(biāo)：

? ? ? ? 1、點擊新增書籍時彈出新增書籍界面，而類型將會進(jìn)行下拉框的顯示。
? ? ? ? 2、新增一本書后，該書就會顯示到未上架的界面中。

? ? ? ? 3、在未上架的界面中點擊上架就會到顯示到已上架中

? ? ? ? 4、在未上架的界面中點擊修改就會進(jìn)行修改

? ? ? ? 5、在已上架的界面中點擊下架就會到顯示到已下架中

二、明確功能：

? ? ? ? ? ? ? ? ? ? ? 1、用combobox控件進(jìn)行類型的顯示、增加

? ? ? ? ? ? ? ? ? ? ? 2、修改

? ? ? ? ? ? ? ? ? ? ? 3、編輯狀態(tài)（上架、下架——因為上架和下架的功能是根據(jù)該書籍的狀態(tài)進(jìn)行區(qū)分的，1表示未上架，2表示已上架，3表示已下架）

三、代碼已經(jīng)效果展示：

? ? ? ? 一、用combobox控件進(jìn)行類型的顯示：

? ? ? ? ? ? ? ?1、思路：

? ? ? ? ? ? ??? ? ? ? ? ? ?1、先建好關(guān)于category表的實體類

? ? ? ? ? ? ? ? ? ? ? ? ? ?2、之后創(chuàng)建categorydao層（寫好查詢?nèi)康姆椒?#xff09;

? ? ? ? ? ? ? ? ? ? ? ? ? ?3、寫好categoryaction包（這是連接前端的代碼）

? ? ? ? ? ? ? ? ? ? ? ? ? ?4、配置好mvc.xml文件

? ? ? ? ? ? ? ? ? ? ? ? ? ?5、之后到對應(yīng)該出現(xiàn)下拉框位置寫好js代碼

? ? ? ? ? ? ? ?2、代碼展示：

? ? ? ? ? ? ? ? ? ? ?2.1實體類：

package com.zking.entity;public class Category {private long id;private String name;public long getId() {return id;}public void setId(long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public Category(long id, String name) {super();this.id = id;this.name = name;}@Overridepublic String toString() {return "Category [id=" + id + ", name=" + name + "]";}public Category() {// TODO Auto-generated constructor stub}}

? ? ? ? ? ? ? ? ? ? ?2.2、categorydao（list方法）：

package com.zking.dao;import java.util.List;import com.zking.entity.Category; import com.zking.util.BaseDao; import com.zking.util.PageBean;public class CategoryDao extends BaseDao<Category> {public List<Category> list(Category category, PageBean pageBean) throws Exception {String sql="select * from t_easyui_category ";return super.executeQuery(sql, Category.class, pageBean);}}

? ? ? ? ? ? ? ? ? ? ?2.3、categoryaction：

public class CategoryAction extends ActionSupport implements ModelDriver<Category>{private Category category=new Category();private CategoryDao cd=new CategoryDao();public Category getModel() {return category;}public String combobox(HttpServletRequest req, HttpServletResponse resp) {try {List<Category> list = cd.list(category, null);ResponseUtil.writeJson(resp, list);} catch (Exception e) {e.printStackTrace();}return null;}

? ? ? ? ? ? ? ? ? ? ?2.4、配置好mvc.xml文件：

<action path="/category" type="com.zking.web.CategoryAction"></action>

? ? ? ? ? ? ? ? ? ? ?2.5、寫好js代碼：

下拉框html代碼： <div style="margin-bottom:20px"><input id="cid" name="cid" value="" label="類別" ><%--<select class="easyui-combobox" name="cid" label="類別" style="width:100%">--%><%--<option value="1">文藝</option>--%><%--<option value="2">小說</option>--%><%--<option value="3">青春</option>--%><%--</select>--%></div> js方法： $(function () {$('#cid').combobox({ url:'${pageContext.request.contextPath}/category.action?methodName=combobox', valueField:'id', textField:'name' }); });

? ? ? ? ? ? ? ?3、效果展示：

? ? ? ? ?二、增加：

? ? ? ? ? ? ? ? 1、代碼展示：

public void add(Book t) throws Exception {t.setPinyin(PinYinUtil.getAllPingYin(t.getName()));t.setDeployTime(new Date());String sql="insert into t_easyui_book(name,pinyin,cid,author,price,image,publishing,description,state,deployTime,sales) values(?,?,?,?,?,?,?,?,?,?,?)";super.executeUpdate(sql, t, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales"});}

? ? ? ? ? ? ? 2.效果展示：

?在右下角可以得到，數(shù)據(jù)為28條，現(xiàn)在進(jìn)行增加

現(xiàn)在可以看到已經(jīng)是30條數(shù)據(jù)了，新增成功

?新增成功已將書籍添加到了未上架的界面中：

? ? ? ? ? 三、修改：

? ? ? ? ? ? ? ? 1、代碼展示：

public void edit(Book t) throws Exception {super.executeUpdate("update t_easyui_book set name=?,pinyin=?,cid=?,"+ "author=?,price=?,image=?,publishing=?,description=?,state=?,deployTime=?,sales=? where id=?", t, new String[] {"name","pinyin","cid","author","price","image","publishing","description","state","deployTime","sales","id"});}

? ? ? ? ? ? ? ? 1、效果展示：

修改前：

????????修改中：

修改后：

? ? ? ? ? ?四、編輯狀態(tài)：

? ? ? ? ? ? ? ? ? 一、在未上架的界面中點擊上架就會到顯示到已上架中：

? ? ? ? ? ? ? ? ? ? ? ?1、思路：

? ? ? ? ? ? ? ? ? ? ? ? ? ? 1、在bookdao中寫好編輯狀態(tài)的方法名為editstatus（根據(jù)id進(jìn)行state狀態(tài)的修改）

? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、然后找到未上架界面，找到上架的超鏈接

? ? ? ? ? ? ? ? ? ? ? ? ? ? 3、之后寫js代碼（在跳轉(zhuǎn)路徑中固定寫好要變成的狀態(tài)）

? ? ? ? ? ? ? ? ? ? ? ? ? ? 4、最后寫刷新代碼

? ? ? ? ? ? ? ? ? ? ? ?2、代碼展示：

bookdao：

public void editStatus(Book t) throws Exception {super.executeUpdate("update t_easyui_book set state=? where id=?", t, new String[] {"state","id"});}

listbook1.jsp：

?js方法：

function shangjia() {$.messager.confirm('確認(rèn)','您確認(rèn)想要上架此書籍嗎？',function(r){if (r){var row = $('#dg').datagrid('getSelected');if (row){$.ajax({url:'${pageContext.request.contextPath}/book.action?methodName=editStatus&state=2&id=' + row.id,success:function (data) {if(data=1){$('#dg').datagrid('reload'); //刷新的代碼 }}})} }});}

在其中的url中定義好要改變的狀態(tài)，上架的目的就是將狀態(tài)為未上架改為已上架（將state=1變成state=2）同樣的刷新代碼也在其中。

? ? ? ? ? ? ? ? ? ? ? ?3、效果展示：

將改書籍上架：

?上架成功：

?同時在未上架界面中要上架的圖書已經(jīng)消失：

?? ? ? ? ? ? ? ? ? 二、在已上架的界面中點擊下架就會到顯示到已下架中

? ? ? ? ? ? ? ? ? ? ? ?1、思路：

? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1、和點一是一樣的，采用同樣的方法：

? ? ? ? ? ? ? ? ? ? ? ? ? ? 2、然后找到已上架界面，找到下架的超鏈接

? ? ? ? ? ? ? ? ? ? ? ? ? ? 3、之后寫js代碼（在跳轉(zhuǎn)路徑中固定寫好要變成的狀態(tài)）

? ? ? ? ? ? ? ? ? ? ? ? ? ? 4、最后寫刷新代碼

? ? ? ? ? ? ? ? ? ? ? ?2、代碼展示：采用bookdao同樣的方法

listbook2.jsp：

?js方法：

function xiajia() {$.messager.confirm('確認(rèn)','您確認(rèn)想要下架此書籍嗎？',function(r){if (r){var row = $('#dg').datagrid('getSelected');if (row){$.ajax({url:'${pageContext.request.contextPath}/book.action?methodName=editStatus&state=3&id=' + row.id,success:function (data) {$('#dg').datagrid('reload'); }})}}});}

? ? ? ? ? ? ? ? ? ? ? ?3、效果展示：將書籍名為阿發(fā)的書籍下架

?下架中：

?書籍名為阿發(fā)這本書已經(jīng)消失：

?在已下架中可以看到阿發(fā)這本書：

?以上效果均已實現(xiàn)

總結(jié)：今天分享的知識就這些了，功能實現(xiàn)并不難，只要細(xì)心與認(rèn)真都到位就可以了。分享知識就到這了，祝大家愛生活愉快！

?

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??

?

? ? ? ? ? ? ? ? ??

? ? ? ? ? ? ? ?

? ? ? ? ? ? ?

總結(jié)

以上是生活随笔為你收集整理的EasyUi之书籍功能（CRUD）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。