精华内容
下载资源
问答
  • 1、添加空白主要代码loadComplete中 2、表格设置为可编辑状态主要是 表格中: cellEdit: true, cellsubmit: "clientArray", 表格字段中:editable:true。 3、因为了空白,不能通过获取选中的数据...

    主要步骤

    1、添加空白行主要在代码loadComplete中

    2、表格设置为可编辑状态主要是

    表格中:

            cellEdit: true,
            cellsubmit: "clientArray",

    表格字段中:editable:true。

    3、不能通过获取选中行的数据新增或修改,不准,尤其是加了空白行,主键是空值更不能获取数据了

    所以点击按钮的时候传值行号,获取行号为

    formatter: function (value, options, row)

    中的options["rowId"]

    之前一直没用过option,只用过value和row哈哈~

    根据行数获取数据

     var ret =  $('#jqGrid').jqGrid('getRowData', rowId);

    4、这些做完之后因为每次点保存按钮时,最后一次输入单元格的编辑状态取消不了,值也有问题,是一个input标签,只能点空白处才能取消编辑状态很不方便

    所以点保存、删除按钮时,更改下表格的编辑状态

     $('#jqGrid').jqGrid("saveCell", lastRow, lastCell);  //当前单元格退出编辑

    这个lastRow和lastCell设置成了全局变量,

    每次修改表格时都会给这两个变量赋值这样就不会有问题了

            beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
                lastRow = iRow;  //给全局变量赋值,点保存按钮前推出编辑模式
                lastCell = iCol;
            },

    整体js

    var lastRow;  //最后修改行号先定义一个全局变量
    var lastCell; //最后修改列号
    $(function () {
        $("#jqGrid").jqGrid({
            url: '../app/xxx/list',
            datatype: "json",
            viewrecords: true,
            height: '100%',
            rowNum: 1000,
            rowList : [1000,2000,3000,4000],
            autowidth:true,
            altRows: true,
            altclass: 'differ',
            pager: "#jqGridPager",
            cellEdit: true,
            cellsubmit: "clientArray", //当单元格发生变化后不直接发送请求、"remote"默认直接发送请求
            multiselect: true,
            colModel: [
                { label: '行号', name:'id',key: true, width: 40, hidden:true, align:'center'  },
            	{ label: '编号', name:'sequenceid', width: 40,  hidden:true,align:'center' },
                { label: '名称', name: 'name2', width: 20, align:'center' , editable:true,sortable : false},
                { label: '手机号1', name: 'number1', width: 35, align:'center' , editable:true,sortable : false},
                { label: '手机号2', name: 'number2', width: 35, align:'center' , editable:true,sortable : false},
                { label: '手机号3', name: 'number3', width: 35, align:'center' , editable:true,sortable : false},
                { label: '手机号4', name: 'number4', width: 35, align:'center' , editable:true,sortable : false},
                { label: '手机号5', name: 'number5', width: 35, align:'center' , editable:true,sortable : false},
                { label: '操作', name: 'updateData', width: 30, align: 'center', formatter: function (value, options, row) {
                         return '<a onclick="vm.saveOrUpdate(\''+options["rowId"]+'\')" class="label label-primary">保存组</a>' +
                             '<a  onclick="vm.delete(\''+options["rowId"]+'\')"class="label label-danger">删除组</a>';
                } }
            ],
            jsonReader : {
                root: "data.list",
                page: "data.currPage",
                total: "data.totalPage",
                records: "data.totalCount",
                "id":"rn"
            },
            prmNames : {
                page:"page",
                rows:"limit",
                order: "order"
            },
            beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
                lastRow = iRow;  //给全局变量赋值,点保存按钮前推出编辑模式
                lastCell = iCol;
            },
            loadComplete: function(){
                //最后一行新增数据
                var ids = $("#jqGrid").jqGrid('getDataIDs');
                if (ids.length == 0) {
                    ids = [0];
                }
                //获得当前最大行号(数据编号)
                var rowid = Math.max.apply(Math, ids);
                //获得新添加行的行号(数据编号)
                var newrowid = rowid + 1;
                var dataRow = {};
                $("#jqGrid").jqGrid("addRowData", newrowid, dataRow, "last");
            }
    
        });
    });
    var vm = new Vue({
        el:'#safenumberapp',
        data:{
            showList: true,
            title:null,
            showjqGridPager:true
        },
        methods: {
            ///commit end
            reload: function (event) {
                vm.showList = true;
                vm.showResult = true;
                var page = $("#jqGrid").jqGrid('getGridParam','page');
                $("#jqGrid").jqGrid('setGridParam',{
                    page:1
                }).trigger("reloadGrid");
            },
            delete: function (rowId) {
                //获取选择的菜单
                $('#jqGrid').jqGrid("saveCell", lastRow, lastCell);  //当前单元格退出编辑
                var ret =  $('#jqGrid').jqGrid('getRowData', rowId);
                if(ret.sequenceid == "" || ret.sequenceid == null || ret.sequenceid == undefined) {alert("空白行无需删除。");return false;}
                confirm('确定要删除选中的组?', function(){
                    $.ajax({
                        type: "POST",
                        url: "../app/delete",
                        data: JSON.stringify(ret.sequenceid),
                        async: false,
                        success: function(r){
                            if(r.status == 200){
                                alert('操作成功', function(index){
                                    vm.reload();
                                });
                            }else{
                                alert(r.msg);
                            }
                        }
                    });
                });
    
    
            }
            saveOrUpdate:function(rowId){
                //获取选择的菜单
                $('#jqGrid').jqGrid("saveCell", lastRow, lastCell);  //当前单元格退出编辑
                var ret =  $('#jqGrid').jqGrid('getRowData', rowId);
                var url = (ret.sequenceid == "" || ret.sequenceid == null || ret.sequenceid == undefined) ? "../app/save" : "../app/update";
                if(!isPhone(ret['number1'])){alert('号码1请输入正确的手机号码');return false};
                if(!isPhone(ret['number2'])){alert('号码2请输入正确的手机号码');return false};
                if(!isPhone(ret['number3'])){alert('号码3请输入正确的手机号码');return false};
                if(!isPhone(ret['number4'])){alert('号码4请输入正确的手机号码');return false};
                if(!isPhone(ret['number5'])){alert('号码5请输入正确的手机号码');return false};
                $.ajax({
                    type: "POST",
                    url: url,
                    data: JSON.stringify(ret),
                    async: false,
                    success: function(r){
                        if(r.status === 200){
                            alert('操作成功', function(index){
                                vm.reload();
                            });
                        }else{
                            alert(r.msg);
                        }
                    }
                });
            }
        }
    });
    function isPhone(phone) {
        if(!(phone == "" || phone == null || phone == undefined)){
            var myreg=/^1[3-9]\d{9}$/;
            if (!myreg.test(phone)) {
                return false;
            }
        }
        return true;
    }
    展开全文
  • 之前实现的总是最后一行,网上搜了下,还真用,这个方法一直才用,不知道居然可以指定插入位置!!! 1. $("#jqgrid").addRowData(rowId, data, pos, idx); 2. //pos可以为[first,last,before,after], 为后两者是...

    开发过程需要新增数据,希望数据总是添加到jagrid表格的第一行,以便用户查看。之前实现的总是加到最后一行,网上搜了下,还真用,这个方法一直才用,不知道居然可以指定插入位置!!!

    1. $("#jqgrid").addRowData(rowId, data, pos, idx);
    2. //pos可以为[first,last,before,after], 为后两者是需要指定相对的行ID
    3. $("#jqgrid").addRowData("1", {"name":"test","age":12}, "first"); 

    展开全文
  • 第二步:word里面如果显示三线表最后一条线不是你想要的加粗效果,则利用表格右下角的放大缩小图标(即下图红色椭圆圈里的个小方格),进行适当调整就会出现最后一条线加粗时候的表格大小。 第三步:如果改变...

    具体步骤:
    第一步:在"段落"中的"边框"里将三线表制作好,设置三条线的宽度。
    第二步:在word里面如果显示三线表最后一条线不是你想要的加粗效果,则利用表格右下角的放大缩小图标(即下图红色椭圆圈里的一个小方格),进行适当调整就会出现最后一条线加粗时候的表格大小。
    第三步:如果改变表格里面的文字或数字,最后一条线又会显示为加粗状态,则执行第二步。
    在这里插入图片描述

    展开全文
  • 原因是没有给table下面的rowkey,才导致的问题 解决方法: el-table 标签里 加一个 row-key 属性 <el-table :data="tableData" @cell-dblclick="tableDbEdit" :row-key="getRowKey" style="width: 100%" ...

    原因是没有给table下面的row加key,才导致的问题
    解决方法:
    在 el-table 标签里 加一个 row-key 属性

    <el-table :data="tableData" @cell-dblclick="tableDbEdit" :row-key="getRowKey" style="width: 100%" border>
            <el-table-column prop="number" label="服务件数">
            </el-table-column>
            <el-table-column prop="total" label="总额(¥)">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button type="primary" plain>删除</el-button> -->
                <a-popconfirm title="你确定要删除吗?" ok-text="确 定" cancel-text="取 消" @confirm="deleteTr(scope)"
                  placement="topRight">
                  <img src="../../assets/imgs/delete-b.svg" alt="" style="cursor: pointer;">
                </a-popconfirm>
              </template>
            </el-table-column>
          </el-table>
    
    data(){
    	return {
    		tableData: [{
              id: 0,
              number: '',
              total: ''
            },]
    	}
    },
    methods: {
        getRowKey (row) {
          return row.id
        },
        deleteTr (scope) {
          this.tableData.splice(scope.$index, 1)
        },
       }
    
    展开全文
  • 表格前面序号

    千次阅读 2015-01-26 13:57:07
    我们做项目的时候,table表格的每条记录的显示,前面的序号肯定不会是id ,而是一些序号。一般是从1开始,一直到最后一条,如果中间有条数据被 删除了,那么下面的条数据就会补全上面的条数据的序号,例如...
  • 但是最后的结果,只有这个表格一行的《修改》按钮才有点击事件,而后面几行的修改按钮,则没有任何用处。 $("#plan-change").on("click",function(){ alert("123123"); $("#plan_content")  .html("  ....
  • 在表格最后一行再加一行 <div class="text-item"> <el-table :data="tableData" stripe style="width: 100%" :header-cell-style="{ background: '#eef1f6' }" <el-table-col
  • bootstrap-table下表格中增加操作的btn,如果是下拉菜单,那么每一页最后一行点击下拉菜单,会出现滚动条,解决方法: 修改这个类,但是这个类改了会有点影响toolbar的显示,不过问题不大,个margin就可以了 ....
  • 思路:创建 table + thead + tbody创建 tr + th创建每一行的 tr + td到页面中注:最后到页面中的原因是每将一个元素到页面一次,页面便会刷新一次,因此先内存中创建好表格再一次性的到页面中,页面只需...
  • bootstrap-table下表格中增加操作的btn,如果是下拉菜单,那么每一页最后一行点击下拉菜单,会出现滚动条,解决方法: 修改这个类,但是这个类改了会有点影响toolbar的显示,不过问题不大,个margin就可以了 ...
  • 6、选中表格一行,右击选择“表格属性”——>选择“边框和底纹”; 7、选择下框线,选择应用于“单元格”,这样,三线表基本完成了,还差最后一步,设置“上下框线加粗”,当然也可以设置其他格...
  • Jquery动态表格

    千次阅读 2017-09-26 10:09:07
    点击保存自动关闭后会在表格最后追加一行刚才的信息。 2.点击编辑时,会弹出一个div表单,要求用户对现有记录进行修改操作。关闭后表格更新信息。 3.点击删除操作会弹出警告,问用户是否真的删除,确定后记录才删除...
  • 方法一打开一个工作表,...出现求和的表格公式 所在求和处双击和的数目就出来了 第一行的出来后,下面的点住向下拖动,都会按格式自动求和的 结果如下,很快工资总额就都有了,可以自己拿计算器验证一下 或者...
  • antd table 添加,编辑,删除

    千次阅读 2019-09-18 10:24:26
    表格行中未有未保存的内容时,表格最后加一行,并可以输入内容,当点击取消时,整行删除不保存。 删除行:所在行删除 保存行:保存所在行 详细代码 index.js import React from 'react'; import...
  • 思路:创建 table + thead + tbody创建 tr + th创建每一行的 tr + td到页面中注:最后到页面中的原因是每将一个元素到页面一次,页面便会刷新一次,因此先内存中创建好表格再一次性的到页面中,页面只需...
  • HTML中的表格小关于

    2019-09-17 23:19:50
    无言 可以用colgroup标签,<colgroup span=”列的数量” width=”200px”>... Table:代表表格 tr:表示一行 td:表示单元格 col:代表一列 th:居中加粗的td。 <table border="1px"...
  • 我有一个出勤电子表格,我需要汇总一行在最后一列中包含总数 . 每行代表一名员工,每列代表一个月中的某一天 . 我使用VBA的原因是因为某些日期列将包含文本,例如TA for Tardy,如果TA存在于该范围中的一个或多个...
  • 最近用java设计了个桌面管理系统,数据展示模块的时候遇到了一点问题,找不到好的展示方式最后发现了JTable这个类,主要涉及这个类的构造与使用注意:JTable都需要JScrollPane中才能显示//必须句...
  • 当用ext grid显示数据的时候,当拉横向滚动条到最后时总出现数据和上面的列错位的问题,后来才发现是自己给ext加功能插件导致的,就是groupHeader,在表格列的上面再加一行列,对当前列进行分组的。 后来只能硬...
  • 最近用java设计了个桌面管理系统, 数据展示模块的时候遇到了一点问题,找不到好的展示方式 最后发现了JTable这个类, ...能生成个56列的表格,表头列名是A-Z的大写字母,类似Excel 2.使用自己的指定模板 new
  • 1. 根据关键字搜索需要的列:公式 =IF(COUNTIF(B2,"*"&"关键字"&"*")=1,1,0) B2是要搜索的单元格,要固定某行或者列对应标号前“$”(多列复制公式,先复制,在最后一行按shift后选中,粘贴即可) 2. 筛选,...
  • //将当前表格最后一行的序号写delRow()方法中,这样我们可以delRow()方法中删除当前行 newCell3.innerHTML='('+(obj.rows.length-1)+')">删除</a>'; } //删除行 function delRow(i){ var obj=getObj(...
  • 假设我们生成一个含有字串的单元格时,使用如下语句,为方便叙述,我们为每一行命令了编号:  WritableFont font1= new WritableFont(WritableFont.TIMES,16,WritableFont.BOLD); 或//设置字体格式为excel支持...
  • 个问题是fixed的tr在ie7中不能进行定位,而且td在定位后并不能保持在表格中的布局,这样在原表格插tr就没意义了。 ps:fixed的相关应用可参考仿LightBox效果。 最后我用的方法是新建个table,并把源tr克隆到...
  • 接下来,用鼠标从第一笔记录开始选,选到最后一笔记录,打开一个空记事本,把表格里的数据以文本的方式复制出来,粘贴到记事本里,注意,不要题头,也就是“课程编号”、“课程全称”的那一行。然后继续查询,把第二...
  • Bootstrap 里的tooltip实际运用过程中会出现tooltip被遮挡住的情况,尤其是表格的情形下,表格第一行(tooltip上方显示)会被遮挡,表格最后一行(tooltip下方显示)会被遮挡 这时我们只需加一句话即可。 data...
  • 本文会在教你怎么用 300~400 代码实现个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚。希望阅读本文后,能让你深入理解 Virtual DOM 算法,给你现有前端的编程...
  • 一、联合查询 ①如何理解注意事项中:相同数目的表达式? 看如下代码,阴影部分为执行的代码片段: ...③如何让总成绩在表格最后一行显示呢? 加一段代码即可: ④如何算出平均值? 二、子查询 ①什...
  • Rails 插入代码与注释

    2017-05-27 09:25:00
    醉了醉了,原来那个表格最后加了然后更新博客,然后最后写的内容就没了。来来回回试了n次都一样。不得已新开个 插入代码 《% ... %》 打印值 《%= ... %》 普通...

空空如也

空空如也

1 2 3 4 5 ... 13
收藏数 251
精华内容 100
关键字:

在表格最后加一行