网上书城Conbobox动态加载下拉框

实现conbobox动态加载下拉框效果图

在这里插入图片描述

实现步骤及代码

1.先创建实体类

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;
 }
 @Override
 public String toString() {
    
    
  return "Category [id=" + id + ", name=" + name + "]";
 }
 public Category(long id, String name) {
    
    
  super();
  this.id = id;
  this.name = name;
 }
 public Category() {
    
    
  super();
 }
    
}

2.创建dao层

public class CategoryDao extends BaseDao<Category> {
    
    
//    查询书籍分类
    public List<Category> list(Category category, PageBean pageBean) throws Exception {
    
    
        String sql = "select * from t_easyui_category where true ";
        return super.executeQuery(sql,pageBean,Category.class);
    }
}

3.创建action

public class CategoryAction extends ActionSupport implements ModelDriven<Category> {
    
    
    private Category category = new Category();
    private CategoryDao categoryDao = new CategoryDao();
public String list(HttpServletRequest request, HttpServletResponse response){
    
    
        try {
    
    
            List<Category> list = categoryDao.list(category, null);
            ResponseUtil.writeJson(response,list);
        } catch (Exception e) {
    
    
            e.printStackTrace();
        }
        return null;
    }
    @Override
    public Category getModel() {
    
    
        return category;
    }
}

4.js代码

$(function(){
    
    
 var ctx=$("#ctx").val();
 $("#cid").combobox({
    
    
  url:ctx+'/category.action?methodName=list',
  valueField:'id',
  textFile:'text'
 });
})

5.jsp页面代码

<%@ 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/jquery-easyui-1.5.1/themes/default/easyui.css">
<!-- 定义图标 -->
<link rel="stylesheet" type="text/css"
 href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">
<script type="text/javascript"
 src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 主键库源码的JS文件 -->
<script type="text/javascript"
 src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/main.js"></script>
</head>
<body>
<input type="hidden" id="ctx" value="${pageContext.request.contextPath }">
<div style="margin:20px 0;"></div>
<div class="easyui-panel" title="已下架书籍" style="width:100%;padding:30px 60px;">
    <form id="ff" action="${pageContext.request.contextPath}/book.action?methodName=add" 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=list',
            valueField:'id',
            textField:'name'
        });
     });
function submitForm() {
    
    
        $('#ff').form('submit',{
    
    
            success:function (param) {
    
    
                $('#ff').form('clear');
            }
        });
    }
function clearForm() {
    
    
        $('#ff').form('clear');
    }
</script>
</body>
</html>

网上书城Conbobox动态加载下拉框

目录

实现conbobox动态加载下拉框效果图

实现步骤及代码

猜你喜欢