精华内容
下载资源
问答
  • 动态新增一行: /** * 新增一行 */ function addNewColumn(id,index) { //row_count = getNowRowCount(id); var html = ''; html += ''; html += ''; html += ''; html += '固定值区间值'; html += ''; ...

    动态新增一行:

    /**
     * 新增一行
     */
    function addNewColumn(id,index) {
    	//row_count = getNowRowCount(id);
    	var html = '';
    	html +=	'<tr class="version-input-group remove-version-input-group"><td><select name="indicatorNum" style="width: 160px;" class="form-control tagNumAdd'+index+'"  οnchange="getSelectedCode(this,'+index+')" οnfοcus="removeBorder(this)"></select></td>';
    	html += '<td><span class="tagName-class'+index+'" style="width: 100px;"></span></td>';
    	html += '<td><span class="tagDesc-class'+index+'" style="width: 160px;"></span></td>';
    	html += '<td><select name="examType" style="width: 90px;" class="form-control examTypeAdd'+index+'" selected="selected" οnchange="getSelectInputVal(this,'+index+')"><option value="1">固定值</option><option value="0">区间值</option></select></td>';
    	html += '<td><input type="text" name="examVal" class="form-control examValInput'+index+'" style="width: 90px;" οnfοcus="removeBorder(this)" /></td>';
    	html += '<td><input type="text" name="examMin" class="form-control examMinInput'+index+'" style="width: 90px;" οnfοcus="removeBorder(this)" placeholder="数字..."/></td>';
    	html += '<td><input type="text" name="examMax" class="form-control examMaxInput'+index+'" style="width: 90px;" οnfοcus="removeBorder(this)" placeholder="数字..."/></td>';
    	if(id=="#recordBodyDetail") {
    		html += '<td></td>';
    	}else{
    		html += '<td><span οnclick="removeNewColumn(this);" style="width:55px;cursor: pointer;" class="btn btn-info">删除</span></td>';
    	}
    	html += '</tr>';
    	$(id).append($(html));
    	if(id!="#recordBodyDetail") {	//详情
    		loadTagIndicator(".tagNumAdd"+index,1);
    	}else{
    		loadTagIndicator(".tagNumAdd"+index,"");
    	}
    	setInputPro("1",index);
    	//row_count ++;
    }

    //动态删除一行

    function removeNewColumn(even) {
    	$(even).parent().parent().remove();
    }
    
    
    function getNowRowCount(id) {
    	var count = 0;
    	count = $(id+" tbody tr").length;
    	count++;
    	return count;
    }


    //表单验证及js对象形式去重

    function checkInputValue(id) {
    	   var jsonObj =  new Object(); 
    	   jsonObj.flag = true;
    	   jsonObj.mess = "";
    	   var $tbody = $(id);
    	   var indicatorNumObj = new Object();
    	   $tbody.children().each(function(){
    		   var indicatorNum = $(this).find('select[name="indicatorNum"]').val();
    		   var examType = $(this).find('select[name="examType"]').val();
    		   var examVal = $(this).find('input[name="examVal"]').val();
    		   var examMin = $(this).find('input[name="examMin"]').val();
    		   var examMax = $(this).find('input[name="examMax"]').val();
    		   if(indicatorNum==null || indicatorNum=='') {
    			   jsonObj.flag = false;
    			   jsonObj.mess = "请选择指标";
    			   $(this).find('select[name="indicatorNum"]').css("border","1px solid #FF2D2D");
    			   return jsonObj;
    		   }
    		   var temp = indicatorNumObj[indicatorNum];
    		   if(temp ==undefined || temp ==null || temp=='') {
    			   indicatorNumObj[indicatorNum] = indicatorNum;
    		   }else{
    			   jsonObj.flag = false;
    			   jsonObj.mess = "不能添加相同指标";
    			   $(this).find('select[name="indicatorNum"]').css("border","1px solid #FF2D2D");
    			   return jsonObj;
    		   }
    		   if(examType=="1") {  //固定值
    			   if(examVal==null || examVal=='') {
    				   jsonObj.flag = false;
    				   jsonObj.mess = "请输入固定值";
    				   $(this).find('input[name="examVal"]').css("border","1px solid #FF2D2D");
    				   return jsonObj;
    			   }
    		   }else {		//区间值
    			   if(examMin==null || examMin=='') {
    				   $(this).find('input[name="examMin"]').css("border","1px solid #FF2D2D");
    				   jsonObj.flag = false;
    				   jsonObj.mess = "请输入指标要求下限";
    				   return jsonObj;
    			   }
    			   if(!checkIsNumber(examMin) || parseFloat(examMin)<0 || parseFloat(examMin)>=10000) {
    				   $(this).find('input[name="examMin"]').css("border","1px solid #FF2D2D");
    				   jsonObj.flag = false;
    				   jsonObj.mess = "指标要求下限需为[0-10000)数字";
    				   return jsonObj;
    			   }
    			   if(examMax==null || examMax=='') {
    				   $(this).find('input[name="examMax"]').css("border","1px solid #FF2D2D");
    				   jsonObj.flag = false;
    				   jsonObj.mess = "请输入指标要求上限";
    				   return jsonObj;
    			   }
    			   if(!checkIsNumber(examMax) || parseFloat(examMax)<0 || parseFloat(examMax)>=10000) {
    				   $(this).find('input[name="examMax"]').css("border","1px solid #FF2D2D");
    				   jsonObj.flag = false;
    				   jsonObj.mess = "指标要求上限需为[0-10000)数字";
    				   return jsonObj;
    			   }
    			   if(parseFloat(examMin)> parseFloat(examMax)) {
    				   $(this).find('input[name="examMax"]').css("border","1px solid #FF2D2D");
    				   jsonObj.flag = false;
    				   jsonObj.mess = "指标要求上限必须大于下限";
    				   return jsonObj;
    			   }
    		   }
    	   });
    	   return jsonObj;
       }



    展开全文
  • //在表格后面添加一行 }else { alert('最大行数不能超过20行'); } }); }); function deltr(opp) { var length = $("#dynamicTable tbody tr").length; if (length ) { alert("至少保留一行"); } else { $(opp)....

    1,这里是html 代码

    		<form class="layui-form" id="form">
    			<input type="button" class="layui-btn" id="btn_addtr" value="增报价单">
    			<table id="dynamicTable">
                        <tbody>
                        <tr>
                            <td align="center">
                                <input type="text" name="NO[]" size="2" value="1" />
                            </td>
                            <td align="center">
                                <input type="text" name="serial_number[]" />
                            </td>
                            <td align="center">
                                <input type="text" name="product_name[]" />
                            </td>
                            <td align="center">
                                <input type="text" name="price[]" />
                            </td>
                            <td align="center">
                                <input type="text" name="details[]" />
                            </td>
                            <td align="center">
                                <input type="text" name="delivery_date[]" />
                            </td>
                            <td align="center">
                                <input type="text" name="supply_cycle[]" />
                            </td>
                            <td align="center">
                                <input type="text" name="description[]" />
                            </td>
                            <td>
                                <input type="button" id="Button2" onClick="deltr(this)" value="删行">
                            </td>
                        </tr>
                        </tbody>
                    </table>
                     <input class="layui-btn"  value="参与报价" type="button" id="buttonsub">
              </form>
    

    2,JS代码

    <script type="text/javascript">
        var count = 1;    //递增的开始值
        $(function () {
            var show_count = 20;   //要显示的条数
            $("#btn_addtr").click(function () {
                var length = $("#dynamicTable tbody tr").length;
                if (length < show_count)    //点击时候,如果当前的数字小于递增结束的条件
                {
                    count=count+1;
                    var tableHtml ="";
                    tableHtml += '<tr>'
                        +'<td><input type="text" name="NO[]" size="2" value="'+count+'" /> </td>'
                        +'<td><input type="text" name="serial_number[]"/></td>'
                        +'<td><input type="text" name="product_name[]"/></td>'
                        +'<td><input type="text" name="price[]"/></td>'
                        +'<td><input type="text" name="details[]"/></td>'
                        +'<td><input type="text" name="delivery_date[]"/></td>'
                        +'<td><input type="text" name="supply_cycle[]"/></td>'
                        +'<td><input type="text" name="description[]"/></td>'
                        +'<td><input type="button" onClick="deltr(this)" value="删行"></td>'
                        +'</tr>';
                    $("#dynamicTable tbody").append(tableHtml) ;   //在表格后面添加一行
                }else {
                   alert('最大行数不能超过20行');
                }
            });
        });
      function deltr(opp) {
            var length = $("#dynamicTable tbody tr").length;
            if (length <= 1) {
                alert("至少保留一行");
            } else {
                $(opp).parent().parent().remove();//移除当前行
            }
        }
    

    3,表单提交数据代码

    <script>
                        $("#buttonsub").click(function () {
                            var data=$("#form").serialize();
                            $.ajax({
                                url:'{:url("Quote/quote_edit")}', //实际使用请改成服务端真实接口
                                data: data,
                                type: "post",//方法类型
                                success: function(res){
                                        layer.alert(res.msg, {icon: 6},function () {
                                            // 获得frame索引
                                            var index = parent.layer.getFrameIndex(window.name);
                                            //关闭当前frame
                                            parent.layer.close(res.msg);
                                            parent.location.reload(); //刷新父亲对象
                                        });
                                }
                            })
                        })
                    </script>
    

    下面我们来看看效果
    在这里插入图片描述
    在这里插入图片描述
    name值是为了做表单提交

    展开全文
  • 用elementui框架的table组件,动态新增行里面的列直接使用输入框,但是需要对输入框验证,按照官方的文章尝试了一下,怎么无法触发验证。问题出在哪儿呢?单独写了个干净的页面,去掉了业务代码:添加人员:...

    用elementui框架的table组件,动态新增行,行里面的列直接使用输入框,但是需要对输入框验证,按照官方的文章尝试了一下,怎么无法触发验证。

    问题出在哪儿呢?

    单独写了一个干净的页面,去掉了业务代码:

    添加人员

    :rules="rules"

    ref="dataForm"

    :model="temp"

    label-position="right"

    label-width="150px"

    >

    :key="'pers.' + scope.$index + '.name'"

    :prop="'pers.' + scope.$index + '.name'"

    :rules="{

    required: true, message: '名称不能为空', trigger: 'blur'

    }"

    >

    :rules="{ required: true, message: '年龄不能为空', trigger: 'blur' }"

    >

    确认

    export default {

    name: 'test',

    data() {

    return {

    rules: {},

    temp: {

    pers: []

    }

    }

    },

    methods: {

    handleAdd() {

    this.temp.pers.push({

    name: '',

    age: 18

    })

    },

    hadnleCreate() {

    let self = this;

    this.$refs['dataForm'].validate((valid) => {

    debugger

    //valid==true,怎么验证都是通过

    })

    }

    }

    }

    展开全文
  • 新增自由main.html页面介绍:【目标】新增自由【路径】1:前台代码(1)弹出新增窗口(2)输入校验(3)提交表单数据ajax提交123axios.post("/travelItem/add.do",this.formData).then((response)=> {})2:后台代码...

     新增自由行

    main.html页面介绍:

    【目标】

    新增自由行

    【路径】

    1:前台代码

    (1)弹出新增窗口

    (2)输入校验

    (3)提交表单数据

    • ajax提交

    1
    2
    3
    axios.post("/travelItem/add.do",this.formData).then((response)=> {

    })

    2:后台代码

    (1)TravelItemController.java (控制器,meinian_web里面实现)

    (2)TravelItemService.java(服务接口,meinian_interface里面实现)

    (3)TravelItemServiceImpl.java(服务实现类,meinian_service里面实现)

    (4)TravelItemDao.java(Dao接口,meinian_dao里面实现)

    (5)TravelItemDao.xml(Mapper映射文件,)

    3:创建数据库和表

    bc82416ffe1baa4a2d90d3e64acb0990.png

    打开 mysql 客户端,创建数据库 meinian

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    DROP TABLE IF EXISTS `t_travelgroup`;
    CREATE TABLE `t_travelgroup` (`id` int(11) NOT NULL AUTO_INCREMENT,`code` varchar(32) DEFAULT NULL,`name` varchar(1000) DEFAULT NULL,`helpCode` varchar(32) DEFAULT NULL,`sex` char(1) DEFAULT NULL,`remark` varchar(1000) DEFAULT NULL,`attention` varchar(1000) DEFAULT NULL,PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=16 DEFAULT CHARSET=utf8;


    DROP TABLE IF EXISTS `t_travelitem`;
    CREATE TABLE `t_travelitem` (`id` int(11) NOT NULL AUTO_INCREMENT,`code` varchar(16) DEFAULT NULL,`name` varchar(32) DEFAULT NULL,`sex` char(1) DEFAULT NULL,`age` varchar(32) DEFAULT NULL,`price` float DEFAULT NULL,`type` char(1) DEFAULT NULL COMMENT '自由行类型,分为自由和跟团两种',`attention` varchar(128) DEFAULT NULL,`remark` varchar(128) DEFAULT NULL,PRIMARY KEY (`id`)
    ) ENGINE=InnoDB AUTO_INCREMENT=98 DEFAULT CHARSET=utf8;





    DROP TABLE IF EXISTS `t_travelgroup_travelitem`;
    CREATE TABLE `t_travelgroup_travelitem` (`travelgroup_id` int(11) NOT NULL DEFAULT '0',`travelitem_id` int(11) NOT NULL DEFAULT '0',PRIMARY KEY (`travelgroup_id`,`travelitem_id`),KEY `item_id` (`travelitem_id`),CONSTRAINT `group_id` FOREIGN KEY (`travelgroup_id`) REFERENCES `t_travelgroup` (`id`),CONSTRAINT `item_id` FOREIGN KEY (`travelitem_id`) REFERENCES `t_travelitem` (`id`)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8;

    【接口文档】

    调用方requestparams子成员:

    名称类型必要说明
    formDataobjectTravelItem表单数据

    formData子成员如下:

    名称类型必要说明
    codeString自由行项目编号
    nameString项目名称
    sexString适用性别
    ageString适用年龄(范围),例如:20-50
    priceFloat价格
    typeString参团类型
    remarkString项目说明
    attentionString注意事项

    请求方式 :post 请求

    请求地址

    /travelItem/add.do

    【讲解】

    3.1. 前台代码

    自由行管理页面对应的是travelItem.html页面,根据产品设计的原型已经完成了页面基本结构的编写,现在需要完善页面动态效果。

    3.1.1. 弹出新增窗口

    页面中已经提供了新增窗口,只是处于隐藏状态。只需要将控制展示状态的属性dialogFormVisible改为true就可以显示出新增窗口。

    新建按钮绑定的方法为handleCreate,所以在handleCreate方法中修改dialogFormVisible属性的值为true即可。同时为了增加用户体验度,需要每次点击新建按钮时清空表单输入项。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 重置表单
    resetForm() {
    this.formData = {};
    },
    // 弹出添加窗口
    handleCreate() {
    this.resetForm();
    this.dialogFormVisible = true;
    },

    3.1.2. 输入校验

    1
    2
    3
    4
    rules: {//校验规则
    code: [{ required: true, message: '项目编码为必填项', trigger: 'blur' }],
    name: [{ required: true, message: '项目名称为必填项', trigger: 'blur' }]
    }

    3.1.3. 提交表单数据

    点击新增窗口中的确定按钮时,触发handleAdd方法,所以需要在handleAdd方法中进行完善。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    //添加
    handleAdd () {
    //校验表单输入项是否合法
    this.$refs['dataAddForm'].validate((valid) => {
    if (valid) {
    //表单数据校验通过,发送ajax请求将表单数据提交到后台
    axios.post("/travelItem/add.do",this.formData).then((response)=> {
    //隐藏新增窗口
    this.dialogFormVisible = false;
    //判断后台返回的flag值,true表示添加操作成功,false为添加操作失败
    if(response.data.flag){
    this.$message({
    message: response.data.message,
    type: 'success'
    });
    }else{
    this.$message.error(response.data.message);
    }
    }).finally(()=> {
    // 刷新页面(列表查询)
    this.findPage();
    });
    } else {
    this.$message.error("表单数据校验失败");
    return false;
    }
    });
    },
    //分页查询
    findPage() {
    },

    3.2. 后台代码

    3.2.1. Controller

    在 meinian_web 工程中创建 TravelItemController

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    package com.atguigu.controller;

    import com.alibaba.dubbo.config.annotation.Reference;
    import com.atguigu.constant.MessageConstant;
    import com.atguigu.entity.Result;
    import com.atguigu.pojo.TravelItem;
    import com.atguigu.service.TravelItemService;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;

    /**
    * TravelItemController
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    */

    @RestController
    @RequestMapping(value = "/travelItem")
    public class TravelItemController {
    @Reference
    private TravelItemService travelItemService;

    //新增
    @RequestMapping("/add")
    public Result add(@RequestBody TravelItem travelItem){
    try {
    travelItemService.add(checkItem);
    }catch (Exception e){
    return new Result(false, MessageConstant.ADD_CHECKITEM_FAIL);
    }
    return new Result(true,MessageConstant.ADD_CHECKITEM_SUCCESS);
    }
    }

    3.2.2. 服务接口

    在 meinian_interface 工程中创建 TravelItemService 接口

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    package com.atguigu.service;

    import com.atguigu.pojo.TravelItem;

    /**
    * TravelItemService
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    */

    public interface TravelItemService {
    void add(TravelItem travelItem);
    }


    3.2.3. 服务实现类

    在 meinian_service 工程中创建 TravelItemServiceImpl 实现类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    package com.atguigu.service.impl;

    import com.alibaba.dubbo.config.annotation.Service;
    import com.atguigu.dao.TravelItemDao;
    import com.atguigu.pojo.TravelItem;
    import com.atguigu.service.TravelItemService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.transaction.annotation.Transactional;



    /**
    * CheckItemServiceImpl
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    * // dubbo(整合声明式事务处理
    * 1:配置applicationContext-tx.xml对类代理,
    * 2:@Service(interfaceClass = TravelItemService.class))
    */


    @Service(interfaceClass = TravelItemService.class)
    @Transactional
    public class TravelItemServiceImpl implements TravelItemService {

    @Autowired
    private TravelItemDao travelItemDao;

    @Override
    public void add(TravelItem travelItem) {
    travelItemDao.add(travelItem);
    }
    }

    3.2.4. Dao接口

    在meinian_dao工程中创建TravelItemDao接口,本项目是基于Mybatis的Mapper代理技术实现持久层操作,故只需要提供接口和Mapper映射文件,无须提供实现类

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    package com.atguigu.dao;

    import com.atguigu.pojo.TravelItem;

    /**
    * TravelItemDao
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-29
    * @Description:
    */

    public interface TravelItemDao {
    void add(TravelItem travelItem);
    }

    3.2.5. Mapper映射文件

    meinian_dao 工程中创建 TravelItemDao.xml 映射文件,需要和 TravelItemDao 接口在同一目录下

    新建文件夹的时候,一定一定要注意,在 resources 文件夹下面新建文件夹

    29a7e0dd4f5d84dacf45c7b5a1a1a3b4.png

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <?xml version="1.0" encoding="UTF-8" ?>
    br /> "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
    <mapper namespace="com.atguigu.dao.TravelItemDao">

    <insert id="add" parameterType="travelItem">
    insert into t_travelitem(code,name,sex,age,price,type,remark,attention)
    values
    (#{code},#{name},#{sex},#{age},#{price},#{type},#{remark},#{attention})
    insert>
    mapper>

    运行程序 http://localhost:82/pages/main.html

    【小结】

    1:前台代码

    (1)弹出新增窗口

    只需要将控制展示状态的属性 dialogFormVisible 改为true就可以显示出新增窗口。

    (2)输入校验

    使用 ElementUI的Form表单校验

    (3)提交表单数据

    • ajax提交

    1
    2
    3
    axios.post("/travelItem/add.do",this.formData).then((response)=> {

    })

    2:后台代码

    (1)TravelItemController.java

    (2)TravelItemService.java(服务接口)

    (3)TravelItemServiceImpl.java(服务实现类)

    (4)TravelItemDao.java(Dao接口)

    (5)TravelItemDao.xml(Mapper映射文件)

    【错误】

    错误 ①

    54d8264b68b4c3e1b322a2f7e6526e29.png

    解决办法

    1
    2
    1.对应的dubbo服务未启动,或者是dubbo没有连上Zookeeper注册中心。
    2.controller层 ,引入远程service的时候,impl没有添加注解 dubbo的@Service 注解(加上@Service(@Service(interfaceClass = CheckItemService.class))之后,就可以了)

    错误 ②

    2ee657e87acc044423a66ae3f8135d5a.png

    解决办法

    1
    2
    3
    4
    5
    6
    7
    8

    <bean id="dataSource"class="com.alibaba.druid.pool.DruidDataSource" destroy-method="close">
    <property name="username" value="root" />
    <property name="password" value="root" />
    <property name="driverClassName" value="com.mysql.cj.jdbc.Driver" />
    <property name="url" value="jdbc:mysql://127.0.0.1:3306/meinian?useUnicode=true&characterEncoding=utf8&serverTimezone=GMT%2B8" />
    bean>

    错误③

    3a3ed4e5810cae948242136c4d7a1f99.png

    解决办法

    ① 先看注解是否添加,service注解,controller注解,各种注解

    ② 导注解的包有没有倒错,特别是service,需要导入dubbo注解

    ③ 如果包没有倒错,注解也添加了,在看看配置文件扫包的时候,包是不是写错了

    4. 第四章. 自由行分页

    【目标】

    1:熟悉分页功能中的请求参数

    2:熟悉分页功能中的响应数据

    3:自由行分页功能实现

    【路径】

    1:前台代码

    (1)定义分页相关模型数据 , 参数通过json传递

    (2)定义分页方法

    • 使用钩子函数,初始化数据

    (3)完善分页方法执行时机

    2:后台代码

    (1)TravelItemController.java

    (2)TravelItemService.java(服务接口)

    (3)TravelItemServiceImpl.java(服务实现类)

    (4)TravelItemDao.java(Dao接口)

    (5)TravelItemDao.xml(Mapper映射文件)

    【讲解】

    本项目所有分页功能都是基于ajax的异步请求来完成的,请求参数和后台响应数据格式都使用json数据格式。

    1:请求参数包括页码、每页显示记录数、查询条件。

    请求参数的json格式为:{currentPage:1,pageSize:10,queryString:‘‘atguigu’’}

    2:后台响应数据包括总记录数、当前页需要展示的数据集合。

    响应数据的json格式为:{total:1000,rows:[]}

    如下图:

    590d33e95cf4d612e6d6c4c656ca7d2a.png

    4.1. 前台代码

    调用方requestparams子成员:

    名称类型必要说明
    currentPageInteger页码
    pageSizeInteger每页记录数
    queryStringString查询条件

    返回方PageResult子成员:

    名称类型必要说明
    totalLong总记录数
    rowsList当前页结果

    调用地址

    /travelItem/findPage.do

    4.1.1. 定义分页相关模型数据

    1
    2
    3
    4
    5
    6
    7
    pagination: {//分页相关模型数据
    currentPage: 1,//当前页码
    pageSize:10,//每页显示的记录数
    total:0,//总记录数
    queryString:null//查询条件
    },
    dataList: [],//当前页要展示的分页列表数据

    4.1.2. 定义分页方法

    在页面中提供了findPage方法用于分页查询,为了能够在travelitem.html页面加载后直接可以展示分页数据,可以在VUE提供的钩子函数created中调用findPage方法

    1
    2
    3
    4
    //钩子函数,VUE对象初始化完成后自动执行
    created() {
    this.findPage();
    },
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //分页查询
    findPage() {
    //分页参数
    var param = {
    currentPage:this.pagination.currentPage,//页码
    pageSize:this.pagination.pageSize,//每页显示的记录数
    queryString:this.pagination.queryString//查询条件
    };
    //请求后台
    axios.post("/travel/findPage.do",param).then((response)=> {
    //为模型数据赋值,基于VUE的双向绑定展示到页面
    this.dataList = response.data.rows;
    this.pagination.total = response.data.total;
    });
    },

    4.1.3. 完善分页方法执行时机

    除了在created钩子函数中调用findPage方法查询分页数据之外,当用户点击查询按钮或者点击分页条中的页码时也需要调用findPage方法重新发起查询请求。

    为查询按钮绑定单击事件,调用findPage方法

    <el-button @click="handleCurrentChange(1)" class="dalfBut">查询el-button>

    为分页条组件绑定current-change事件,此事件是分页条组件自己定义的事件,当页码改变时触发,对应的处理函数为handleCurrentChange

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div class="pagination-container">
    <el-paginationclass="pagiantion"
    @current-change="handleCurrentChange":current-page="pagination.currentPage":page-size="pagination.pageSize"layout="total, prev, pager, next, jumper":total="pagination.total">

    el-pagination>
    div>

    定义handleCurrentChange方法

    1
    2
    3
    4
    5
    6
    //切换页码
    handleCurrentChange(currentPage) {
    // currentPage为切换后的页码
    this.pagination.currentPage = currentPage;
    this.findPage();
    },

    4.2. 后台代码

    4.2.1. Controller

    在 TravelItemController中增加分页查询方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    package com.atguigu.controller;

    import com.alibaba.dubbo.config.annotation.Reference;
    import com.atguigu.constant.MessageConstant;
    import com.atguigu.entity.PageResult;
    import com.atguigu.entity.QueryPageBean;
    import com.atguigu.entity.Result;
    import com.atguigu.pojo.TravelItem;
    import com.atguigu.service.TravelItemService;
    import org.springframework.web.bind.annotation.RequestBody;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RestController;

    /**
    * CheckItemController
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    */

    @RestController
    @RequestMapping(value = "/travel")
    public class TravelItemController {

    @Reference
    private TravelItemService travelItemService;


    @RequestMapping("/findPage")
    public PageResult findPage(@RequestBody QueryPageBean queryPageBean){
    PageResult pageResult = travelItemService.findPage(queryPageBean.getCurrentPage(),queryPageBean.getPageSize(),queryPageBean.getQueryString());
    return pageResult;

    }
    }

    4.2.2. 服务接口

    在 TravelItemService 服务接口中扩展分页查询方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    package com.atguigu.service;

    import com.atguigu.entity.PageResult;
    import com.atguigu.pojo.CheckItem;

    /**
    * TravelItemService
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    */

    public interface TravelItemService {


    PageResult findPage(Integer currentPage, Integer pageSize, String queryString);
    }


    4.2.3. 服务实现类

    在 TravelItemServiceImpl服务实现类中实现分页查询方法,基于 Mybatis 分页助手插件实现分页

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    package com.atguigu.service.impl;

    import com.alibaba.dubbo.config.annotation.Service;
    import com.atguigu.dao.CheckItemDao;
    import com.atguigu.entity.PageResult;
    import com.atguigu.pojo.TravelItem;
    import com.atguigu.service.CheckItemService;
    import com.github.pagehelper.Page;
    import com.github.pagehelper.PageHelper;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.transaction.annotation.Transactional;



    /**
    * TravelItemServiceImpl
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    * // dubbo(整合声明式事务处理
    * 1:配置applicationContext-tx.xml对类代理,
    * 2:@Service(interfaceClass = TravelItemService.class))
    */


    @Service(interfaceClass = TravelItemService.class)
    @Transactional
    public class TravelItemServiceImpl implements TravelItemService {

    @Autowired
    private TravelItemDao travelItemDao;

    @Override
    public PageResult findPage(Integer currentPage, Integer pageSize, String queryString) {
    // 不使用分页插件PageHelper
    // 至少写2条sql语句完成查询
    // 第1条,select count(*) from t_travelitem,查询的结果封装到PageResult中的total
    // 第2条,select * from t_travelitem where NAME = '001' OR CODE = '001' limit ?,? (0,10)(10,10)((currentPage-1)*pageSize,pageSize)
    // 使用分页插件PageHelper(简化上面的操作)
    // 1:初始化分页操作
    PageHelper.startPage(currentPage,pageSize);
    // 2:使用sql语句进行查询(不必在使用mysql的limit了)
    Page page = travelItemDao.findPage(queryString);// 3:封装return new PageResult(page.getTotal(),page.getResult());
    }
    }

    4.2.4. Dao接口

    在 TravelItemDao 接口中扩展分页查询方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    package com.atguigu.dao;

    import com.atguigu.pojo.TravelItem;
    import com.github.pagehelper.Page;

    /**
    * TravelItemDao
    *
    * @Author: 马伟奇
    * @CreateTime: 2019-12-17
    * @Description:
    */

    public interface TravelItemDao {

    PagefindPage(String queryString);
    }


    4.2.5. Mapper映射文件

    在 TravelItemDao.xml 文件中增加 SQL 定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <select id="findPage" parameterType="string" resultType="travelItem">

    select * from t_travelitem
    <where>
    <if test="value!=null and value.length>0">
    name=#{value} or code=#{value}
    if>
    where>

    select * from t_travelitem
    <where>
    <if test="value!=null and value.length>0">
    name like "%"#{value}"%" or code=#{value}
    if>
    where>

    select>

    如果使用if进行判断,这里需要是value读取值,不能改成其他参数。

    导入查询语句到mysql数据库

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    INSERT INTO `t_travelitem` VALUES ('28', '0001', '三亚呀诺达享浪漫5日蜜月游', '0', '0-100', '5', '1', '无', '三亚呀诺达享浪漫5日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('29', '0002', '5天4晚,海南三亚自由行玩法', '0', '0-100', '5', '1', '无', '5天4晚,海南三亚自由行玩法');
    INSERT INTO `t_travelitem` VALUES ('30', '0003', '5天4晚,三亚玩法,带着爸妈去旅行', '0', '0-100', '5', '1', '无', '5天4晚,三亚玩法,带着爸妈去旅行');
    INSERT INTO `t_travelitem` VALUES ('31', '0004', '三亚大东海风景迷人5日家庭游', '0', '0-100', '5', '1', '无', '三亚大东海风景迷人5日家庭游');
    INSERT INTO `t_travelitem` VALUES ('32', '0005', '4天3晚厦门玩法,热恋在土楼与都市沿岸', '0', '0-100', '5', '1', '无', '4天3晚厦门玩法,热恋在土楼与都市沿岸');
    INSERT INTO `t_travelitem` VALUES ('33', '0006', '4日3晚,厦门亲子玩法', '0', '0-100', '5', '1', '无', '4日3晚,厦门亲子玩法');
    INSERT INTO `t_travelitem` VALUES ('34', '0007', '厦门风灌醉鼓浪屿的海4日浪漫游', '0', '0-100', '5', '1', '无', '厦门风灌醉鼓浪屿的海4日浪漫游');
    INSERT INTO `t_travelitem` VALUES ('35', '0008', '4天3晚,海上花园城市,厦门玩法', '0', '0-100', '5', '1', '无', '4天3晚,海上花园城市,厦门玩法');
    INSERT INTO `t_travelitem` VALUES ('36', '0009', '香港迪士尼里追童梦5日亲子游', '0', '0-100', '5', '1', '无', '香港迪士尼里追童梦5日亲子游');
    INSERT INTO `t_travelitem` VALUES ('37', '0010', '香港铜锣湾处处风情5日休闲游', '0', '0-100', '5', '1', '无', '香港铜锣湾处处风情5日休闲游');
    INSERT INTO `t_travelitem` VALUES ('38', '0011', '5天4晚寻味香港玩法,回忆记忆中的“港味儿”', '0', '0-100', '10', '2', '无', '5天4晚寻味香港玩法,回忆记忆中的“港味儿”');
    INSERT INTO `t_travelitem` VALUES ('39', '0012', '版纳傣族园丽江古城8日三地连线游', '0', '0-100', '10', '2', null, '版纳傣族园丽江古城 8日三地连线游');
    INSERT INTO `t_travelitem` VALUES ('40', '0013', '6天5晚,丽江香格里拉蜜月玩法,意外的遇见,刚刚好!', '0', '0-100', '10', '2', null, '6天5晚,丽江香格里拉蜜月玩法,意外的遇见,刚刚好!');
    INSERT INTO `t_travelitem` VALUES ('41', '0014', '4天3晚,云南丽江大众玩法', '0', '0-100', '10', '2', null, '4天3晚,云南丽江大众玩法');
    INSERT INTO `t_travelitem` VALUES ('42', '0015', '丽江古城佳肴诱惑5日美食游', '0', '0-100', '10', '2', null, '丽江古城佳肴诱惑5日美食游');
    INSERT INTO `t_travelitem` VALUES ('43', '0016', '成都九寨沟五彩天堂7日深度游', '0', '0-100', '10', '2', null, '成都九寨沟五彩天堂7日深度游');
    INSERT INTO `t_travelitem` VALUES ('44', '0017', '成都九寨沟黄龙远离喧嚣6日风光游', '0', '0-100', '10', '2', null, '成都九寨沟黄龙远离喧嚣6日风光游');
    INSERT INTO `t_travelitem` VALUES ('45', '0018', '7天6晚,四川玩法', '0', '0-100', '10', '2', null, '7天6晚,四川玩法');
    INSERT INTO `t_travelitem` VALUES ('46', '0019', '4天3晚,大连玩法,阳光明媚去看海', '0', '0-100', '10', '2', null, '4天3晚,大连玩法,阳光明媚去看海');
    INSERT INTO `t_travelitem` VALUES ('47', '0020', '4天3晚,浪漫之都大连玩法', '0', '0-100', '10', '2', null, '4天3晚,浪漫之都大连玩法');
    INSERT INTO `t_travelitem` VALUES ('48', '0021', '4天3晚大连海滨玩法', '0', '0-100', '10', '2', null, '4天3晚大连海滨玩法');
    INSERT INTO `t_travelitem` VALUES ('49', '0022', '大连美丽不过滨海路 4日经典游', '0', '0-100', '10', '2', null, '大连美丽不过滨海路4日经典游');
    INSERT INTO `t_travelitem` VALUES ('50', '0023', '1天,尽览东方巴黎风采,哈尔滨玩法', '0', '0-100', '10', '2', null, '1天,尽览东方巴黎风采,哈尔滨玩法');
    INSERT INTO `t_travelitem` VALUES ('51', '0024', '5天4晚哈尔滨+吉林双城玩法', '0', '0-100', '10', '2', null, '5天4晚哈尔滨+吉林双城玩法');
    INSERT INTO `t_travelitem` VALUES ('52', '0025', '哈尔滨老道外风情建筑 5日魅力游', '0', '0-100', '10', '2', null, '哈尔滨老道外风情建筑5日魅力游');
    INSERT INTO `t_travelitem` VALUES ('53', '0026', '哈尔滨雪博会一头栽雪堆 5日狂欢游', '0', '0-100', '10', '2', null, '哈尔滨雪博会一头栽雪堆5日狂欢游');
    INSERT INTO `t_travelitem` VALUES ('54', '0027', '大阪东京夜景艾特你了6日连线游', '0', '0-100', '10', '2', null, '大阪东京夜景艾特你了6日连线游');
    INSERT INTO `t_travelitem` VALUES ('55', '0028', '东京大阪一秒钟嗨翻乐园 6日亲子游', '0', '0-100', '10', '2', null, '东京大阪一秒钟嗨翻乐园6日亲子游');
    INSERT INTO `t_travelitem` VALUES ('56', '0029', '东京扫货扫到手抽筋5日购物游', '0', '0-100', '10', '2', null, '东京扫货扫到手抽筋5日购物游');
    INSERT INTO `t_travelitem` VALUES ('57', '0030', '东京富士山温泉5日泡汤游', '0', '0-100', '10', '2', null, '东京富士山温泉 5日泡汤游');
    INSERT INTO `t_travelitem` VALUES ('58', '0031', '巴厘岛梦幻海滩分享甜蜜 5日蜜月游', '0', '0-100', '10', '2', null, '巴厘岛梦幻海滩分享甜蜜5日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('59', '0032', '6天5晚千岛之国,万般风情,印尼海岛玩法。', '0', '0-100', '10', '2', null, '6天5晚千岛之国,万般风情,印尼海岛玩法。');
    INSERT INTO `t_travelitem` VALUES ('60', '0033', '5天4晚巴厘岛玩法,拥抱理想国的阳光', '0', '0-100', '10', '2', null, '5天4晚巴厘岛玩法,拥抱理想国的阳光');
    INSERT INTO `t_travelitem` VALUES ('61', '0034', '巴厘岛金巴兰海滩享SPA6日悠闲游', '0', '0-100', '10', '2', null, '巴厘岛金巴兰海滩享SPA6日悠闲游');
    INSERT INTO `t_travelitem` VALUES ('62', '0035', '巴厘岛乌布皇宫如梦如幻 5日蜜月游', '0', '0-100', '10', '2', null, '巴厘岛乌布皇宫如梦如幻 5日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('63', '0036', '巴厘岛海神庙全家出行8日亲子游', '0', '0-100', '10', '2', null, '巴厘岛海神庙全家出行8日亲子游');
    INSERT INTO `t_travelitem` VALUES ('64', '0037', '巴厘岛金银岛悠然自得6日经典游', '0', '0-100', '10', '2', null, '巴厘岛金银岛悠然自得6日经典游');
    INSERT INTO `t_travelitem` VALUES ('65', '0038', '巴厘岛蓝点教堂SPA专享7日休闲游', '0', '0-100', '10', '2', null, '巴厘岛蓝点教堂SPA专享7日休闲游');
    INSERT INTO `t_travelitem` VALUES ('66', '0039', '大阪东京夜景艾特你了6日连线游', '0', '0-100', '10', '2', null, '大阪东京夜景艾特你了6日连线游');
    INSERT INTO `t_travelitem` VALUES ('67', '0040', '东京大阪一秒钟嗨翻乐园6日亲子游', '0', '0-100', '10', '2', null, '东京大阪一秒钟嗨翻乐园6日亲子游');
    INSERT INTO `t_travelitem` VALUES ('68', '0041', '6天5晚最牛的日本本州玩法', '0', '0-100', '10', '2', null, '6天5晚最牛的日本本州玩法');
    INSERT INTO `t_travelitem` VALUES ('69', '0042', '日本京都箱根东瀛和风7日风情游', '0', '0-100', '10', '2', null, '日本京都箱根东瀛和风7日风情游');
    INSERT INTO `t_travelitem` VALUES ('70', '0043', '日本箱根大涌谷6日关东关西游', '0', '0-100', '10', '2', null, '日本箱根大涌谷6日关东关西游');
    INSERT INTO `t_travelitem` VALUES ('71', '0044', '日本伏见稻荷朱红色6日古都游', '0', '0-100', '10', '2', null, '日本伏见稻荷朱红色6日古都游');
    INSERT INTO `t_travelitem` VALUES ('72', '0045', '大阪环球影城一键收藏5日亲子游', '0', '0-100', '10', '2', null, '大阪环球影城一键收藏5日亲子游');
    INSERT INTO `t_travelitem` VALUES ('73', '0046', '大阪黑门市场吃海鲜5日美食游', '0', '0-100', '10', '2', null, '大阪黑门市场吃海鲜5日美食游');
    INSERT INTO `t_travelitem` VALUES ('74', '0047', '大阪城公园樱花美成画5日经典游', '0', '0-100', '10', '2', null, '大阪城公园樱花美成画5日经典游');
    INSERT INTO `t_travelitem` VALUES ('75', '0048', '大阪海游馆亲密接触5日休闲游', '0', '0-100', '10', '2', null, '大阪海游馆亲密接触5日休闲游');
    INSERT INTO `t_travelitem` VALUES ('76', '0049', '日本奈良公园小鹿乱撞7日古都游', '0', '0-100', '10', '2', null, '日本奈良公园小鹿乱撞7日古都游');
    INSERT INTO `t_travelitem` VALUES ('77', '0050', '大阪道顿堀小吃嘴不停6日美食游', '0', '0-100', '10', '2', null, '大阪道顿堀小吃嘴不停6日美食游');
    INSERT INTO `t_travelitem` VALUES ('78', '0051', '大阪梅田空中庭院漫步6日休闲游', '0', '0-100', '10', '2', null, '大阪梅田空中庭院漫步6日休闲游');
    INSERT INTO `t_travelitem` VALUES ('79', '0052', '大阪奈良赴一场盛宴6日深度游', '0', '0-100', '10', '2', null, '大阪奈良赴一场盛宴6日深度游');
    INSERT INTO `t_travelitem` VALUES ('80', '0053', '日本繁华都市闲逛6日深度游', '0', '0-100', '10', '2', null, '日本繁华都市闲逛6日深度游');
    INSERT INTO `t_travelitem` VALUES ('81', '0054', '毛里求斯鹿岛享沙滩阳光6日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯鹿岛享沙滩阳光6日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('82', '0055', '7天6晚毛里求斯360度多情与激情玩法', '0', '0-100', '10', '2', null, '7天6晚毛里求斯360度多情与激情玩法');
    INSERT INTO `t_travelitem` VALUES ('83', '0056', '毛里求斯迪拜享浪漫10日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯迪拜享浪漫10日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('84', '0057', '毛里求斯迪拜两国畅玩9日经典游', '0', '0-100', '10', '2', null, '毛里求斯迪拜两国畅玩9日经典游');
    INSERT INTO `t_travelitem` VALUES ('85', '0058', '毛里求斯蓝湾纯净浪漫8日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯蓝湾纯净浪漫8日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('86', '0059', '毛里求斯七色土绚烂多姿8日蜜月游', '0', '0-100', '10', '2', null, '毛里求斯七色土绚烂多姿8日蜜月游');
    INSERT INTO `t_travelitem` VALUES ('87', '0060', '5天4晚四川成都大众玩法', '0', '0-100', '10', '2', null, '5天4晚四川成都大众玩法');
    INSERT INTO `t_travelitem` VALUES ('88', '0061', '成都杜甫草堂历史悠久5日访古游', '2', '0-100', '10', '2', null, '成都杜甫草堂历史悠久5日访古游');
    INSERT INTO `t_travelitem` VALUES ('89', '0062', '成都人民公园享欢乐时光5日亲子游', '2', '0-100', '10', '2', null, '成都人民公园享欢乐时光5日亲子游');
    INSERT INTO `t_travelitem` VALUES ('90', '0063', '成都锦里小吃很地道4日美食游', '0', '0-100', '10', '2', null, '成都锦里小吃很地道4日美食游');
    INSERT INTO `t_travelitem` VALUES ('91', '0064', '成都锦里感受慢生活4日经典游', '0', '0-100', '10', '2', null, '成都锦里感受慢生活4日经典游');
    INSERT INTO `t_travelitem` VALUES ('92', '0065', '成都春熙路吃货天堂4日美食游', '0', '0-100', '10', '2', null, '成都春熙路吃货天堂4日美食游');

    运行程序 http://localhost:82/pages/main.html

    2fb8776ee3b767e669f30a2aec4b473f.png

    【小结】

    1:前台代码

    (1)定义分页相关模型数据

    (2)定义分页方法

    • 使用钩子函数,初始化数据

    (3)完善分页方法执行时机

    • 查询按钮

    2:后台代码

    (1)TravelItemController.java

    (2)TravelItemService.java(服务接口)

    (3)TravelItemServiceImpl.java(服务实现类)

    在TravelItemServiceImpl服务实现类中实现分页查询方法,基于Mybatis分页助手插件实现分页

    1
    2
    3
    4
    5
    public PageResult pageQuery(Integer currentPage, Integer pageSize, String queryString) {
    PageHelper.startPage(currentPage,pageSize);
    Page page = checkItemDao.selectByCondition(queryString);return new PageResult(page.getTotal(),page.getResult());
    }

    (4)TravelItemDao.java(Dao接口)

    (5)TravelItemDao.xml(Mapper映射文件)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    --条件查询-->
    <select id="selectByCondition" parameterType="string" resultType="travelItem">select * from t_travelitem
    <if test="value != null and value.length > 0">where code = #{value} or name = #{value}if>select>
    展开全文
  • ext动态新增一行之二

    2009-03-03 10:39:04
    ext 动态 新增行 新增一行(2)------------------------------------------------------------------------------------------- //定义表单 var simple = new Ext.FormPanel({ labelAlign: 'left', title: '添加....
  • 对于输入的数据进行校验:但是总是只能取到第一行的值,是因为对于新增的表格行使用的是clone函数,所以所有的表格行ID重复,如果从表格行以ID取值,则只能取到第一行的值,因此可以添加name属性,从name属性取值,...
  • 点击+可以新增一行,点击-可以删除一行 我table中的表单是通过django的form生成到前端的 前端代码如下 <td>{{ form1.relationship }} <td>{{ form1.re_name }} <td>{{ form1.re_number }} <td>{{ ...
  • 点击上级的新增

    2019-06-17 21:51:30
    点击上一级的新增,就是以这一级的ID为主的新增,就是选中这一个数据表格里面的其中一行列后,才可以在下一级的表格中新增,选中数据表格的一行,就是选中这一行的ID,只要选中之后才能进行下一级的新增数据。...
  • 点击新增按钮,表单新增一行 ``` 新增 ``` ``` data(){ return { formObj: { bondName: "", etName: "", purchaseAmount: "", seat: "" }, items: [], text: 0 } } ``` ``` ...
  • .表格标签与属性 1.表格的新增html属性 1)valign=“top/middle/bottom/baseline”垂直对齐 2)rules=“groups(添加组与组和列组和列组之间的分割线)/rows(添加之间的分割线)/cols(添加列之间的分割线...
  • 在新增页面,我有一个实体类,里面包含里一个实体类,并且是一对多关系, ...如下图,点击新增扩展属性,新增一行。 ![图片说明](https://img-ask.csdn.net/upload/202004/09/1586396230_909759.png)
  • 工作需要,经常用到layui ,经常会遇到对新增表单元素页面不显示样式的的坑,其实很简单,个思路: 在你新增元素下面刷新一下表单:form.render();   比如说:layui.open({ }) ;  在后面增加 form....
  • 对于动态增减表单项,Element UI 官方文档表单那一节已经介绍得很清楚了,但是没有新增按钮和删除并列情况,这里针对点击按钮增删排输入框的问题做个总结。先上效果微信图片_20200927102654.pngclass="binding-...
  • 如图,ElementUI表单里嵌套了表格,表格内每能进行新增、编辑、删除等操作,同时能针对该行的字段进行校验(而不是整个表单校验!),这种需求应该很常见,但是搜了很多资料,没有完美的解决方案,大部分都只是...
  • 可添加操作,新增或者删除。三、源码:Form表单:&lt;form id="reportForm" method="post"&gt;&lt;table class="table-grid table-list" cellpadding="1" ...
  • 新增 1、新增按钮 2、新增事件 在methods中,用来打开弹窗, dialogVisible在data中定义使用有...2-2、修改事件, 把当前数据赋值给表单,就把当前数据回显出来了 2-3、修改事件 修改接口,判断是否有id,
  • 1.与其他元素一起独占一行,设置宽高无效 2.span是纯粹的行内元素 二.块级元素 1.独占一行,设置宽高有效 2.块级元素和行内元素可以放到块级元素内,块级元素不能放到行内元素内。 3.块级元素和行内元素是可以互相...
  • 两个需求,一是点击增加采购人,就会增加一行input输入框,如图: 二是,点击继续添加,增加一个form表单,form表单里也有新增联系人需求 2.动态增减表单某一项 ???? 在element-ui组件 form表单 中可以看到有,...
  • layer.msg("只能选中一行数据进行修改!", {icon: 0}); return; } var url="/system/xxx/addForm?id="+id; $("#formModal").removeData("bs.modal"); $("#formModal").modal({ remote: url }); }); 下面...
  • 数据的新增

    2020-08-18 15:10:42
    : 一行的所有数据都传到这个参数data里,想要数据就从这里拿(return返回HTML代码) //设置标识为新增 isInsert = true; //清空表单 $('#id input[type=“reset”]’).click(); //设置模态
  • 1.处理了动态表单的设值问题 2.添加了的向上或向下排序 3.添加了可以在当前的下边或上边增加新的功能 4.添加了可以单选或勾选多项删除不需要的的功能 5.添加了新增的高亮(以new红标记标注)的功能 6....
  • 单表新增

    2019-06-09 17:38:08
    新增的原理基本就是获取到表单的值,判断它不为空,再传到控制器里,保存之前判断它和之前的数据是否有冲突就了。 首先获取表单值的值,strValIsNotNull是我写的个公共的方法,数据不为空。然后通过post请求把...
  • 对于动态增减表单项,Element UI 官方文档表单...存在一排必填的姓名与手机号,点击增加后会新增一行,点击每行后面的删除图标则会删除该行 必填项很简单,就是普通表单: <el-form ref="form" :rules=...
  • 1、新增用户信息:当我们点击新增按钮的时候,就会跳转到新增用户信息的jsp页面,然后通过在这个页面中填写好的信息内容,通过form表单提交的方式传输到指定的action路径,传到Servlet层,此时Servlet层可以...
  • 1.处理了动态表单的设值问题 2.添加了的向上或向下排序 3.添加了可以在当前的下边或上边增加新的功能 4.添加了可以单选或勾选多项删除不需要的的功能 5.添加了新增的高亮(以new红标记标注)的功能 6....
  • data() { return{ ... inputNew: false, } } ... // 添加字段按钮 ... // 向表格数组中数据添加一行 如果存在新增加未保存的字段,则不可以执行向下执行添加操作,即限制每次只能新增一条 if(this

空空如也

空空如也

1 2 3 4 5 ... 10
收藏数 190
精华内容 76
关键字:

表单新增一行