EasyUI项目之书籍管理（CRUD）

最新推荐文章于 2024-05-27 12:07:42 发布

文渊.

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量127

点赞数

分类专栏：笔记文章标签： easyui java

本文链接：https://blog.csdn.net/m0_52788922/article/details/120638046

版权

笔记专栏收录该内容

38 篇文章 0 订阅

订阅专栏

在上节课的基础上对书籍管理增加CRUD操作

目标效果：
在这里插入图片描述
目标：

1，点击新增，类型将会在下拉框中显示，增加成功后，该书会显示到未上架界面中。

2，未上架，已上架（上架，下架书籍是改变书籍的状态）。

3，已下架，查询状态为下架的书籍。

4，修改，在未上架中可选中书籍进行修改。

打开选项卡（在上节课基础上完善选项卡功能）

$(function() {
	$("#bookMenus").tree({
		url:$("#ctx").val()+"/permission.action?methodName=tree",
	    onClick:function(node){
	    	//判断有无重复选项卡
	    	var exists=$('#bookTabs').tabs('exists',node.text);
	    	if(exists){
	    		//存在则选中
	    		$('#bookTabs').tabs('select',node.text);
	    	}else{
	    		//不存在则打开新的选项卡
	    	$('#bookTabs').tabs('add',{ 
	    	    title:node.text,    
	    	    //node.attributes.self.menuURL决对路径
	    	    content:'<iframe width="100%" height="100%" src="'+$("#ctx").val()+node.attributes.self.url+'"></iframe>',  
	    	    closable:true,    
	    	    tools:[{    
	    	        iconCls:'icon-mini-refresh',    
	    	        handler:function(){    
	    	            alert('refresh');    
	    	        }    
	    	    }]    
	    	});
	    	}
	    }
	});
})

一，增加

1.1 ComboBox（利用ComboBox控件制作下拉列表框）
实体类
在这里插入图片描述
CategoryDao

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 where 1=1 ";
		long id = category.getId();
		if(id != 0) {
			sql += " and id =" + id;
		}
		return super.executeQuery(sql, Category.class, pageBean);
	}
	
}

CategoryAction


package com.zking.web;
 
import java.util.List;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.zking.dao.CategoryDao;
import com.zking.entity.Category;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
 
public class CategoryAction extends ActionSupport implements ModelDriver<Category> {
 
	private Category category = new Category();
	private CategoryDao categoryDao = new CategoryDao();
 
	public Category getModel() {
		return category;
	}
 
	// 类别下拉框
	public String combobox(HttpServletRequest req, HttpServletResponse resp) throws Exception {
//		获取下拉框值
		List<Category> list = categoryDao.list(category, null);
		ResponseUtil.writeJson(resp, list);
		return null;
	}
	
}

配置xml文件

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

js代码

	$(function () {
 	   $('#cid').combobox({
    	    url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
   	     valueField:'id',
  	      textField:'name'
  	  })
	});
 
	//表单提交增加按钮
	function submitForm() {
	}
 
    function clearForm() {
    }

界面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>书籍新增</title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="已下架书籍" style="width:100%;padding:30px 60px;">
    <form id="ff" action="" method="post">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'书名:',required:true">
        </div>
        <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>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="price" style="width:100%"
                   data-options="label:'价格:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="publishing" style="width:100%"
                   data-options="label:'出版社:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="description" style="width:100%;height:60px"
                   data-options="label:'简介:',required:true">
        </div>
        <%--默认未上架--%>
        <input type="hidden" name="state" value="1">
        <%--默认起始销量为0--%>
        <input type="hidden" name="sales" value="0">
    </form>
 
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
    </div>
</div>
<script>
	$(function () {
 	   $('#cid').combobox({
    	    url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
   	     valueField:'id',
  	      textField:'name'
  	  })
	});
 
	//表单提交增加按钮
	function submitForm() {
	}
 
    function clearForm() {
    }
    
</script>
</body>
</html>

效果展示：
在这里插入图片描述
2.2 增加

Book

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

BookAction

//增加
	public void add(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
			bookDao.add(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			ResponseUtil.writeJson(resp, 0);
		}
	}

拼音工具类：


package com.zking.util;
 
import java.util.regex.Pattern;
 
import net.sourceforge.pinyin4j.PinyinHelper;
import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;
import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;
import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;
import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType;
import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination;
 
/**
 * 拼音工具类，能将汉字转换成拼音的首字母
 */
public class PinYinUtil {
	// 名字长度
	private static int NAME_LENGTH = 3;
 
	/**
	 * 将首个汉字转换为全拼
	 * 其他是汉字首字母
	 * @param src
	 * @return
	 */
	public static String getPingYin(String src) {
 
		char[] name = src.toCharArray();
		String[] newName = new String[name.length];
		HanyuPinyinOutputFormat pyFormat = new HanyuPinyinOutputFormat();
		pyFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
		pyFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
		pyFormat.setVCharType(HanyuPinyinVCharType.WITH_V);
		String account = "";
		int length = name.length;
		try {
			// 名字大于等于3个字的时候，姓取全称,名取首字母。
			if(length>=NAME_LENGTH){
				for (int i = 0; i < length; i++) {
					// 截取姓
					if(i==0){
						// 判断是否为汉字字符
						if (Character.toString(name[i]).matches("[\\u4E00-\\u9FA5]+")) {
							newName = PinyinHelper.toHanyuPinyinStringArray(name[i], pyFormat);
							account += newName[0];
						} else
							account += Character.toString(name[i]);
					}else{
						account += getPinYinHeadChar(Character.toString(name[i]));
					}
 
				}
			}else{
				// 只有2个字的名字,账号是名字的拼音全称
				for (int i = 0; i < length; i++) {
					// 判断是否为汉字字符
					if (Character.toString(name[i]).matches("[\\u4E00-\\u9FA5]+")) {
						newName = PinyinHelper.toHanyuPinyinStringArray(name[i], pyFormat);
						account += newName[0];
					} else
						account += Character.toString(name[i]);
				}
			}
			return account;
		} catch (BadHanyuPinyinOutputFormatCombination e1) {
			e1.printStackTrace();
		}
		return account;
	}
 
	/**
	 * 全部汉字转换成拼音
	 * @param src
	 * @return
	 */
	public static String getAllPingYin(String src) {
		StringBuffer sb = new StringBuffer();
		String [] arr = src.split("");
		for (String s : arr) {
			sb.append(PinYinUtil.getPingYin(s));
		}
		return sb.toString();
	}
 
	/**
	 * 返回中文的首字母
	 * @param str
	 * @return
	 */
	public static String getPinYinHeadChar(String str) {
 
		String convert = "";
		for (int j = 0; j < str.length(); j++) {
			char word = str.charAt(j);
			String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(word);
			if (pinyinArray != null) {
				convert += pinyinArray[0].charAt(0);
			} else {
				convert += word;
			}
		}
		return convert;
	}
 
	public static void main(String[] args) {
		String cn = "保存并插入数据库";
		System.out.println(PinYinUtil.getAllPingYin(cn));
		System.out.println(PinYinUtil.getPingYin(cn));
		System.out.println(PinYinUtil.getPinYinHeadChar(cn));
	}
}

配置xml文件


	<action path="/book" type="com.zking.web.BookAction">
	<forward name="findBook"  path="/fg/findBook.jsp" redirect="false"> </forward>
	</action>

js代码

//表单提交增加按钮
	function submitForm() {
	    $('#ff').form('submit',{
	        url:'${pageContext.request.contextPath}/book.action?methodName=add',
	        success:function (data) {
	            if(data == 1){
	            $('#ff').form('clear');
	            }
	        }
	    });
	}
 
    function clearForm() {
        $('#ff').form('clear');
    }

效果展示：
在这里插入图片描述

二，上架与下架

Bookdao

//上架与下架
	public void editStatus(Book book) throws Exception {
		String sql = "update t_easyui_book set state=? where id=?";
		super.executeUpdate(sql, book, new String[] {"state","id"});
	}

BookAction

//上架与下架
	public void editStatus(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
			bookDao.editStatus(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			ResponseUtil.writeJson(resp, 0);
		}
	}

上架js代码

 function shangjia() {
        $.messager.confirm('确认','您确认想要上架此书籍吗？',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) {
                        	$('#dg').datagrid('reload');
                        }
                    })
                } 
            }
        });
 
    }

下架js代码


    function xiajia() {
        $.messager.confirm('确认','您确认想要下架此书籍吗？',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');
                        }
                    })
                }
            }
        });
 
    }

上架界面代码


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>未上架书籍</title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body>
 
<%--未上架书籍--%>
<table id="dg" style="style=" width:400px;height:200px;
"></table>
 
<div id="tb">
    <input class="easyui-textbox" id="name" name="name" style="width:20%;padding-left: 10px" data-options="label:'书名:',required:true">
    <a id="btn-search" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>
 
<!-- 弹出框提交表单所用 -->
<div id="dd" class="easyui-dialog" title="编辑窗体" style="width:600px;height:450px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
 
    <form id="ff" action="${pageContext.request.contextPath}/book.action?methodName=edit" method="post">
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="name" style="width:100%" data-options="label:'书名:',required:true">
        </div>
        <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>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="author" style="width:100%" data-options="label:'作者:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="price" style="width:100%"
                   data-options="label:'价格:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="publishing" style="width:100%"
                   data-options="label:'出版社:',required:true">
        </div>
        <div style="margin-bottom:20px">
            <input class="easyui-textbox" name="description" style="width:100%;height:60px"
                   data-options="label:'简介:',required:true">
        </div>
        <%--默认未上架--%>
        <input type="hidden" name="state" value="">
        <%--默认起始销量为0--%>
        <input type="hidden" name="sales" value="">
        <input type="hidden" name="id" value="">
        <input type="hidden" name="image" value="">
    </form>
 
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
    </div>
 
</div>
 
<!-- 图片上传 -->
<div id="dd2" class="easyui-dialog" title="书籍图标上传" style="width:600px;height:450px;"
     data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true,buttons:'#bb'">
 
    <form id="ff2" action="" method="post" enctype="multipart/form-data">
        <div style="margin-bottom:20px">
            <input type="file" name="file">
        </div>
    </form>
 
    <div style="text-align:center;padding:5px 0">
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm2()" style="width:80px">提交</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">重置</a>
    </div>
 
</div>
 
</body>
<script>
    function shangjia() {
        $.messager.confirm('确认','您确认想要上架此书籍吗？',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) {
                        	$('#dg').datagrid('reload');
                        }
                    })
                } 
            }
        });
 
    }
 
    //修改
    function edit() {
    	$('#cid').combobox({
    	    url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
   	     valueField:'id',
  	      textField:'name'
  	  });
 
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $('#ff').form('load', row);
            $('#dd').dialog('open');
        }
    }
 
    //提交编辑信息的表单
    function submitForm() {
        $('#ff').form('submit',{
        	url:'${pageContext.request.contextPath}/book.action?methodName=edit',
            success: function (param) {
                $('#dd').dialog('close');
                $('#dg').datagrid('reload');
                $('#ff').form('clear');
            }
        });
    }
 
    function clearForm() {
        $('#ff').form('clear');
    }
 
    //图片上传
    function upload() {
        $('#dd2').dialog('open');
    }
 
    //图片上传表单提交
    function submitForm2() {
        var row = $('#dg').datagrid('getSelected');
        console.log(row);
        // if (row) {
        //     $('#ff2').attr("action", $('#ff2').attr("action") + "&id=" + row.id);
        // }
        $('#ff2').form('submit', {
            url: '${pageContext.request.contextPath}/book.action?methodName=upload&id=' + row.id,
            success: function (param) {
                $('#dd2').dialog('close');
                $('#dg').datagrid('reload');
                $('#ff2').form('clear');
            }
        })
    }
 
    $(function () {
 
        $("#btn-search").click(function () {
            $('#dg').datagrid('load', {
                name: $("#name").val()
            });
        });
 
        $('#dg').datagrid({
            url: '${pageContext.request.contextPath}/bookVo.action?methodName=list&&state=1',
            fit: true,
            fitColumns: true,
            pagination: true,
            singleSelect: true,
            toolbar:'#tb',
            columns: [[
                // {field:'id',title:'id',width:100},
                {field: 'id', title: '书籍名称', hidden: true},
                {field: 'name', title: '书籍名称', width: 50},
                {field: 'pinyin', title: '拼音', width: 80},
                {field: 'cname', title: '连表类别', width: 40},
                {
                    field: 'cid', title: '书籍类别', width: 40, formatter: function (value, row, index) {
                      
                      //方法一：1，同步异步问题  2，json对象转json字符串问题  3，性能问题
                      //书籍类别id  
                      var cid = row.cid;
                      var typeName = "";
                      $.ajax({
                    	url: '${pageContext.request.contextPath}/category.action?methodName=load&&id='+cid,
                    	//同步异步  
                    	async:false,			 
                    	success:function(data){
                    	//转换为json字符串  
						var jsonObj = eval("("+data+")");
						typeName = jsonObj.name;
						//alert(typeName);
				}
                });
                return typeName;
                    }
                },
                {field: 'author', title: '作者', width: 40},
                // {field:'price',title:'价格',width:100},
                {
                    field: 'image', title: '图片路径', width: 42, formatter: function (value, row, index) {
                        return '<img style="width:80px;height: 60px;" src="' + row.image + '"></img>';
                    }
                },
                {field: 'publishing', title: '出版社', width: 40},
                {field: 'price', title: '价格', width: 40},
                // {field:'desc',title:'描述',width:100},
                // {field:'state',title:'书籍状态',width:100},
                {field: 'sales', title: '销量', width: 40},
                {field: 'description', title: '简介', width: 80},
                {field: 'deployTime', title: '上架时间', width: 80, align: 'right'},
                {
                    field: 'xxxx', title: '操作', width: 80, formatter: function (value, row, index) {
                        return '<a href="#" οnclick="upload()">图片上传</a>&nbsp;&nbsp;' +
                            '<a href="#" οnclick="shangjia()">上架</a>&nbsp;&nbsp;' +
                            '<a href="#" οnclick="edit();">修改</a>';
                    }
                }
            ]]
        });
 
    })
 
 
</script>
</html>

下架界面代码

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>已上架书籍</title>
    <link rel="stylesheet" type="text/css"
          href="${pageContext.request.contextPath}/static/js/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/js/easyui/themes/icon.css">
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script type="text/javascript"
            src="${pageContext.request.contextPath}/static/js/easyui/jquery.easyui.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/main.js"></script>
</head>
<body>
<table id="dg" style="style=" width:400px;height:200px;
"></table>
 
<script>
    function xiajia() {
        $.messager.confirm('确认','您确认想要下架此书籍吗？',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');
                        }
                    })
                }
            }
        });
 
    }
 
    $(function () {
        $('#dg').datagrid({
            url: '${pageContext.request.contextPath}/book.action?methodName=list&&state=2',
            fit: true,
            fitColumns: true,
            pagination: true,
            singleSelect: true,
            columns: [[
                // {field:'id',title:'id',width:100},
                {field: 'id', title: '书籍名称', hidden: true},
                {field: 'name', title: '书籍名称', width: 50},
                {field: 'pinyin', title: '拼音', width: 80},
                {
                    field: 'cid', title: '书籍类别', width: 40, formatter: function (value, row, index) {
                        if (row.cid == 1) {
                            return "文艺";
                        } else if (row.cid == 2) {
                            return "小说";
                        } else if (row.cid == 3) {
                            return "青春";
                        } else {
                            return value;
                        }
                    }
                },
                {field: 'author', title: '作者', width: 40},
                // {field:'price',title:'价格',width:100},
                {
                    field: 'image', title: '图片路径', width: 41, formatter: function (value, row, index) {
                        return '<img style="width:80px;height: 60px;" src="' + row.image + '"></img>';
                    }
                },
                {field: 'publishing', title: '出版社', width: 40},
                // {field:'desc',title:'描述',width:100},
                // {field:'state',title:'书籍状态',width:100},
                {field: 'sales', title: '销量', width: 40},
                {field: 'deployTime', title: '上架时间', width: 80, align: 'right'},
                {
                    field: 'xxxx', title: '操作', width: 80, formatter: function (value, row, index) {
                        return  '<a href="#" οnclick="xiajia();">下架</a>';
                    }
                }
            ]]
        });
    })
</script>
</body>
</html>

效果展示：
在这里插入图片描述

三，修改

BookDao

//	修改
	public void edit( Book book) throws Exception {
		//设置拼音
		book.setPinyin(PinYinUtil.getAllPingYin(book.getName()));
		//设置时间
		book.setDeployTime(new Date());
		String sql = "update t_easyui_book set name=?,pinyin=?,cid=?,image=?,state=?,sales=?,author=?,publishing=? where id=?";
		super.executeUpdate(sql, book, new String[] {"name","pinyin","cid","image","state","sales","author","publishing","id"});
	}

BookAction

public void edit(HttpServletRequest req, HttpServletResponse resp) throws Exception {
		try {
			bookDao.edit(book);
			ResponseUtil.writeJson(resp, 1);
		} catch (Exception e) {
			e.printStackTrace();
			ResponseUtil.writeJson(resp, 0);
		}
	}

js代码

 //修改
    function edit() {
    	$('#cid').combobox({
    	    url:'${pageContext.request.contextPath}/category.action?methodName=combobox',
   	     valueField:'id',
  	      textField:'name'
  	  });
 
        var row = $('#dg').datagrid('getSelected');
        if (row) {
            $('#ff').form('load', row);
            $('#dd').dialog('open');
        }
    }
 
    //提交编辑信息的表单
    function submitForm() {
        $('#ff').form('submit',{
        	url:'${pageContext.request.contextPath}/book.action?methodName=edit',
            success: function (param) {
                $('#dd').dialog('close');
                $('#dg').datagrid('reload');
                $('#ff').form('clear');
            }
        });
    }
 
    function clearForm() {
        $('#ff').form('clear');

}

效果展示：
在这里插入图片描述
到这里就结束了，有不对或补充的地方欢迎大家评论，谢谢！

文渊.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI项目之书籍管理（CRUD）

在上节课的基础上对书籍管理增加CRUD操作目标效果：目标：1，点击新增，类型将会在下拉框中显示，增加成功后，该书会显示到未上架界面中。2，未上架，已上架（上架，下架书籍是改变书籍的状态）。3，已下架，查询状态为下架的书籍。4，修改，在未上架中可选中书籍进行修改。打开选项卡（在上节课基础上完善选项卡功能）$(function() { $("#bookMenus").tree({ url:$("#ctx").val()+"/permission.action?methodNa
复制链接

扫一扫