精华内容
下载资源
问答
  • 场景:某供应商模块,有新增、编辑操作,对数据进行更改后,关闭新增或编辑页面,原页面数据刷新思路:1、如果能在供应商页面监听到新增或编辑页面的tab页关闭,那么在供应商页面通过事件监听后执行:window.location....

    场景:某供应商模块,有新增、编辑操作,对数据进行更改后,关闭新增或编辑页面,原页面数据刷新

    20190716164225775379.png

    思路:1、如果能在供应商页面监听到新增或编辑页面的tab页关闭,那么在供应商页面通过事件监听后执行:window.location.reload()即可。

    百度许久无果,故放弃。

    2、在新增或编辑操作完成时,重新发送供货商的页面请求,起初总是用内置的refresh()、reload()、refreshTabs()等方法一通乱试,也想过用ajax重新请求后台供应商页面,但都无效或有差错,最后选择关闭tab页再重新打开就好,虽然很笨,但用户并不能感觉到,且能实现数据刷新,下面时主要代码。

    form.on(‘submit(save)‘, function (data) {

    data.field.status = data.field.status ? 0 : 1;

    $.ajax({

    type: "POST",

    url: siteurl + ‘/sys/supplier/save‘,

    data: JSON.stringify({

    ‘supplierInfo‘: data.field,

    }),

    async: false,

    dataType: "json",

    contentType: ‘application/json;charset=UTF-8‘,

    success: function (r) {

    if (r.code === 0) {

    if (r.re !== 0) {

    pLayer.confirm(‘保存成功,是否返回?‘, {

    btn: [‘返回‘, ‘继续添加‘]

    }, function () {

    //关闭弹出框(提示返回或继续添加)

    pLayer.closeAll();

    //先关闭供货商模块,然后再次打开,此时可以实现数据刷新

    parent.app.closeTab(398);

    parent.app.addTab({

    url: siteurl + ‘/sys/supplier/searchlist‘,

    icon: ‘‘,

    title: ‘供货商‘,

    id: ‘398‘//menuId

    })

    //此刻再关闭新增或编辑页面

    parent.app.closeTab(75);//75为选项卡id,也对应了menuId,id可以通过F12,element中查看

    });

    }

    else

    pLayer.alert(‘添加失败!‘);

    } else {

    pLayer.alert(r.msg);

    }

    }

    });

    return false;

    });

    展开全文
  • layui学习——数据表格嵌套下拉列表,并实现动态更新项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废仓),要对这些...

    layui学习——数据表格嵌套下拉列表,并实现动态更新

    项目中有些字段的数据为固定的几个值,这些字段在数据表格中显示为汉字,但在数据库中以数字形式存储,例如:仓库属性(0:普通仓/1:检验仓/2:报废仓),要对这些字段进行数据表格行内编辑有些麻烦。

    因此,在数据表格中嵌套下拉列表是一个比较好的方案。

    步骤1:创建数据表格嵌套下拉列表样式

    使用layui的template功能,先创建一个下拉列表:

    script type="text/html" id="WHAttr"

    select lay-filter='table' lay-verify=''

    option value="0"普通仓/option

    option value="1"检验仓/option

    option value="2"报废仓/option

    /select

    /script

    以仓库属性字段为例。我在项目中使用的是自动渲染的方式渲染表格的,因此需要在仓库属性的th标签中加入lay-data属性:

    th lay-data="{field:'WHAttr',templet:'#WHAttr'}"仓库属性/th

    这样就在数据表格中嵌套一个下拉列表了,但样式好像不对,看起来怪怪的,下拉框与单元格大小不一致,下拉框也被遮挡了。

    于是就要修改样式了:

    style

    /*使下拉列表框不被遮挡*/

    .layui-table-cell {

    overflow: visible !important;

    }

    /*使列表框与表格单元格重合*/

    td .layui-form-select {

    margin-top: -10px;

    margin-left: -15px;

    margin-right: -15px;

    }

    /style

    到这一步,表格样式就做好了。

    步骤2:实现数据同步

    完成步骤1后,表格中已经嵌套下拉列表了,但是默认显示的是下拉列表的第一行,接下来要做的就是修改下拉列表的默认行,让表格能够显示正确的数据。

    var divForm = $("#" + tableId).next(); // 获取表格

    var tableCache = table.cache[tableCacheId]; // 获取表格缓存数据

    var trJqs = divForm.find(".layui-table-body tr"); // 获取表格body下的所有tr标签

    trJqs.each(function () { // 遍历每个tr标签

    var trJq = $(this); // 获得当前遍历的tr标签

    var dataIndex = trJq.attr("data-index"); // 得到当前数据行的data-index,即为第几行数据

    trJq.find("td").each(function () { // 遍历tr标签下的每一个td标签

    var tdJq = $(this); // 获得当前遍历的td标签

    var fieldName = tdJq.attr("data-field"); // 获得当前td标签的字段名

    var selectJq = tdJq.find("select"); // 获得当前td标签下的select标签

    if (selectJq.length == 1) { // 判断select标签是否存在

    selectJq.eq(0).val(tableCache[dataIndex][fieldName]); // 将表格里的缓存数据赋值给select标签

    }

    });

    });

    form.render('select'); // 重新加载select表单

    完成了这一步,数据表格加载完成后,表格中下拉列表中默认显示的行数据就会与数据表格的缓存数据一致了。

    步骤3:实现数据动态更新

    使用layui form的select下拉选择事件,监听下拉列表的数据更新

    form.on('select(table)', function (data) {

    var tableCache = table.cache['table'], // 获得数据表格的缓存数据

    value = data.value, // 得到下拉列表改变后的value值

    field = data.othis.parents('td').attr('data-field'), // 获得下拉列表的父级td标签的字段名称

    dataIndex = parseInt(data.othis.parents('tr').attr('data-index')), // 获得变化的下拉列表所在的行index

    lineDate = tableCache[dataIndex]; // 获得数据表格中该行的缓存数据

    if (tableCache[dataIndex][field] != value) { // 判断数据是否发生了变化

    // 这里可以写ajax实现与后台数据的交互

    tableCache[dataIndex][field] = value; // 将修改后的数据更新到数据表格的缓存数据中

    }

    });

    全文完!

    layui学习——数据表格嵌套下拉列表,并实现动态更新 相关文章

    数据排序 Part One

    目前未添加归并排序 因为我不会 为什么要对数据进行排序 举个简单的 例子 : 2020国总统大选有n位竞争者 他们分别是A,B,C,D,E,F,G,H,I,J...... 他们的票数为710,273,123,654,354,725,443,353,204...... 而这个国家又很特别,要选选票第n小的人当 如

    CSP202012-2期末预测之最佳阈值

    十万个数据就不可能用笨办法去一个一个试了,先将指数递减排序并假定阈值为最大值。阈值不断缩小时根据上一次的记录去修改得到新的阈值的正确率。如果选用下一个阈值时并没有缩小则记录,不立刻操作。 突然发现CSP有下载答卷功能。 #includebits/stdc++.husi

    数据库SQL之学习SUM总和套用条件CASE WHEN语句

    1.SQL之学习SUM总和套用条件CASE WHEN语句 2.条件语句CASE WHEN 格式已经在图中写的很明白了 -- 查询t_wzw库中所有数据 总和(条件为t_wzw.birthday = date_sub函数(当前时间(),范围 7天) 有就返回1 否则返回0 结束) 别名SELECT sum(CASE WHEN t_wzw.birthday

    kubernetes-学习笔记_大魂师

    第十三章、Kubernetes网络概念及策略控制 13.1、Kubernetes基本网络模型 13.1.1、k8s网络基本法则:约法三章 + 四大目标 1)Kubernetes对于Pod间的网络没有任何限制,只需满足如下【三个基本条件】: 所有 pod与其他Pod 之间其实是可以直接通信的,无需经过

    JavaSE_基本语法学习

    JavaSE_基本语法学习 1.注释 注释有三种: 1. 单行注释//2. 多行注释/**/3. 文档注释 /** */ 2.标识符与关键字 java所有的组成部分都需要名字. 标识符:类名,变量名以及方法名都被称为标识符 关键字:除类名,变量名以及方法名外,其他基本为关键字 //abstract定

    lvm学习笔记01

    为什么使用逻辑卷: 直接使用fdisk分区挂载的话,随着时间的推移,数据量越来越大,硬盘空间越来越小,要想扩充容量的话,就必须挂载新硬盘然后做数据迁移,这就必然导致前台业务的停止,不符合企业需求,因此完美的解决方法应该是在零停机前提下可以自如对

    代码审计学习01-in_array() 函数缺陷

    一、开始代码审计之旅 01 从今天起,学习代码审计了,这篇文章就叫代码审计01吧,题目来自PHP SECURITY CALENDAR 2017的第一题,结合红日安全写的文章,开始吧。 二、先看这道题目 1、题目名称:Wish List 2、in_array() 函数的作用 in_array() 函数的作用是

    Spring Boot返回Json数据及如何进行数据封装

    在项目开发中,接口与接口之间,前后端之间数据的传输都使用 Json 格式,在 Spring Boot 中,接口返回 Json 格式的数据很简单,在 Controller 中使用 @RestController 注解即可返回 Json 格式的数据, @RestController 也是 Spring Boot 新增的一个注解,我

    导出数据

    数据导出 首先是给一个导出的按钮事件 el-button type="primary" @click="clickExport"导出/el-button 表格给一个复选框进行当前的导出 el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange" // 复选框事件 // 这个是

    【JAVA】之获取CSV文件数据以及获取Excel文件数据

    一、获取CSV文件数据 import org.apache.poi.ss.usermodel.Cell;import org.apache.poi.ss.usermodel.Sheet;import org.apache.poi.ss.usermodel.Workbook;import org.apache.poi.xssf.usermodel.XSSFWorkbook;import org.testng.SkipException;import org.t

    展开全文
  • layui实现删除数据的方法:首先获得当前行数据以及“lay-event”对应的值;然后获取点击的应用位置;接着循环数组的数据,并定义一个bool;最后通过“obj.del();”删除对应行的DOM结构,并更新缓存即可。layui——...

    layui实现删除数据的方法:首先获得当前行数据以及“lay-event”对应的值;然后获取点击的应用位置;接着循环数组的数据,并定义一个bool;最后通过“obj.del();”删除对应行的DOM结构,并更新缓存即可。

    942288f7bc034350a6f05d52f5ca25df.png

    layui——删除表格数据(数组数据)

    代码如下:table.on('tool(dataTable)', function(obj) { //注:tool是工具条事件名,test是table原始容器的属性 lay-filter="对应的值"

    var data = obj.data; //获得当前行数据

    var layEvent = obj.event; //获得 lay-event 对应的值

    //获取点击的应用位置

    if (layEvent == 'delete') {

    layer.confirm('确认删除吗?', function(index) {

    mans.forEach((item, index) => {//先循环数组的数据

    let bool = item.userId == data.userId;//定义一个bool如果数据的id和当前行数据相等

    if (bool) {

    mans.splice(index, 1);

    }

    });

    console.log(mans);

    obj.del(); //删除对应行(tr)的DOM结构,并更新缓存

    layer.close(index);

    });

    }

    });

    展开全文
  • 基于Layui实现的树形菜单页面具体方法实现方法一:针对Layui模板的前后端统一更新1. 删除2. 添加3. 后端方法二:基于Dtree实现的纯前端树形增删改文中的组件地址 具体方法实现 实现树形菜单,本文将给出两种实现方式...

    具体方法实现

    实现树形菜单,本文将给出两种实现方式。

    1. 针对Layui前端模板EasyWeb iframe未实现的添加\修改\删除节点的功能,这里给出与后端实时同步的前端页面刷新方式实现节点的增删改。
    2. 基于Layui扩展的Dtree包,直接实现不依赖于后端的节点增删改,即只是前端样式更改,不会更改后端存放的.json数据。

    方法一:针对Layui模板的前后端统一更新

    PS:我这里使用MongoDB实现json文件的存储,当然也可以将json文件直接存储在文件系统中。文中所有数据均为json格式。
    实现效果图:
    在这里插入图片描述
    数据库存储格式(data中存放表结构,name存放用户索引):
    在这里插入图片描述

    当进行增删改操作时,json文件的封装在前端完成,通过Ajax请求将封装好的Json数据作为字符串数组传到后端,后端将其存入数据库。
    每次增删改操作完成后,均会由insTb.reload再次调用该接口实现后端数据后,前端显示与后端数据的实时同步。

    //前端通过Layui-table直接请求数据库数据
    layui.use(['layer', 'form', 'admin', 'treeTable', 'util', 'xmSelect'], function () {
            var $ = layui.jquery;
            var layer = layui.layer;
            var form = layui.form;
            var admin = layui.admin;
            var treeTable = layui.treeTable;
            var util = layui.util;
            var xmSelect = layui.xmSelect;
            var tbDataList = [];
            // 渲染表格
            var insTb = treeTable.render({
                elem: '#authoritiesTable',
                // url: '/iframe/test.json',
                url: '/request/getMongoJson?name=user1',
                toolbar: ['<p>',
                    '<button lay-event="add" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>&nbsp;',
                    '<button lay-event="del" class="layui-btn layui-btn-sm layui-btn-danger icon-btn"><i class="layui-icon">&#xe640;</i>删除</button>',
                    '</p>'].join(''),
                tree: {
                    iconIndex: 2,
                    idName: 'authorityId',
                    pidName: 'parentId',
                    isPidData: true,
                    arrowType: 'arrow2',
                    getIcon: 'ew-tree-icon-style2'
                },
                cols: [
                    [
                    // {type: 'checkbox'},
                    {type: 'numbers'},
                    {
                        title: '类型', templet: function (d) {
                            return [
                                '<span class="layui-badge layui-badge-green">菜单</span>',
                                '<span class="layui-badge layui-badge-gray">文件</span>'
                            ][d.isMenu];
                        }, align: 'center', width: 80
                    },
                    {field: 'authorityName', title: '文件名称<i class=\"layui-icon\">&#xe642;</i>', minWidth: 150,edit:'text'},
                    {field: 'menuUrl', title: '菜单url'},
                    {field: 'authority', title: '权限标识'},
                    {field: 'orderNumber', title: '排序号', align: 'center', width: 80},
    
                    {title: '创建时间', templet: '<p>{{layui.util.toDateString(d.createTime)}}</p>', align: 'center'},
                    {title: '操作', toolbar: '#authoritiesTbBar', align: 'center', width: 190}
                ]
                ],
                done: function (data) {
                    tbDataList = data;
                }
            });
    
    	//后端根据用户name值查询并获取MongoDB中的数据,封装为Json传回前端
    	@ResponseBody
        @RequestMapping(value = "/getMongoJson", method = RequestMethod.GET)
        public String getMongoJson(String name){
            Query query = new Query(Criteria.where("name").is(name));
    //        query.fields().exclude("_id").include("data");
            List<Map> list = mongoTemplate.find(query, Map.class,  "User");
            Gson gson = new Gson();
            String res = "";
            if (list.size() != 0)
                res = gson.toJson(list.get(0));
            System.out.println(res);
    //        FindIterable<Map> documents = mongoTemplate.getCollection("User").find(bson,Map.class);
    //        for (Map document : documents) {
    //            System.out.println(document);
    //        }
            return res;
        }
    

    1. 删除

    删除一个节点,我们需要考虑两点:一是删除一个目录节点之后,对应子菜单以及子节点的删除;二是删除后,对后续节点ID值以及其parentID的更新。本文将通过队列进行整棵树的遍历操作,实现对应增删改操作。

            /* 删除 */
            function doDel(obj) {
                if(obj.data.authorityId != 1){
                    layer.confirm('确定要删除选中数据吗?', {
                        skin: 'layui-layer-admin',
                        shade: .1
                    }, function (i) {
                        layer.close(i);
                        var loadIndex = layer.load(2);
                        var optiondata = $.extend(true, {}, insTb.options.data)
                        var tree = insTb.options.data[0]              //insTb.options.data中存放着整个树
                        var delNode = obj.data.authorityId              //delNode记录待删除的节点号
                        var delParent
                        var delLength = 1                               //记录一共删除的节点个数
                        var mark = false
                        // console.log(tree)
                        let node = []
                        let res = []
                        node.push(tree)
                        while (node.length != 0) {                        //使用一个队列实现遍历整棵树
                            var temp = node.shift()
                            if (node.length != 0)
                                var temp2 = node[0]
                            else
                                var temp2 = temp
                            if (temp.authorityId != delNode) {
                                if (mark) {
                                    temp.authorityId -= delLength
                                    temp.orderNumber -= delLength
                                    if (temp.parentId > delParent)
                                        temp.parentId -= delLength
                                }
                                res.push(temp)
                            }
                            if (temp.authorityId == delNode && !mark) {           //如果当前节点是待删除根节点,判断其是否为目录,删除其所有子节点并将其标记为-2
                                // console.log(delNode)
                                if (temp.isMenu == 0) {                  //并计算出删除的总结点数
                                    delLength += (temp2.authorityId - temp.authorityId - 1);    //删除的节点数就是它自己加上它的子节点(下一个同级目录与它的序号差值)
                                    temp.authorityId = -2
                                    delete temp.children
                                } else {
                                    temp.authorityId = -2
                                }
                                mark = true
                                delParent = temp.parentId
                            }
                            if (temp.children != undefined)                  //继续向后遍历
                                for (var i = temp.children.length - 1; i >= 0; i--) {
                                    node.unshift(temp.children[i])
                                }
                        }
    
                        for (var i = 0; i < res.length; i++) {
                            delete res[i].children
                            delete res[i].LAY_INDEX
                            delete res[i].open
                            res[i]['open'] = true
                            res[i] = JSON.stringify(res[i])
                        }
                        console.log(res)
                        $.ajax({
                            url: 'request/changeMongoJson',
                            type: 'POST',
                            async: false,
                            traditional: true,
                            data: {"res": res, "name": "user1"},
                            success: function (response) {
                                //请求成功后执行的代码
                                // insTb.options.data = optiondata
                                // obj.del()
                                res = []
                                node = []
                                layer.close(loadIndex);
                                layer.msg("删除成功", {icon: 1});
                                insTb.options.data = optiondata
                                insTb.refresh();
                            },
                            error: function (status) {
                                //失败后执行的代码
                                // alert("fail")
                                // layer.close(loadIndex);
                                // layer.msg("无法删除根目录", {icon: 2});
                                // insTb.refresh();
                            }
                        })
                     });
                }
                else
                    layer.msg("无法删除根目录", {icon: 2});
            }
    

    2. 添加

    添加操作相对简单于删除,只需将新增节点添加到其父节点的下一个,并将后续节点的ID以及parentID向后移动一位(+1)。

    function doAdd(obj){
                mData = obj.data
                if(obj.data.isMenu == 0)
                    admin.open({
                        type: 1,
                        area: '600px',
                        title: '新建文件',
                        content: $('#authoritiesEditDialog').html(),
                        success: function (layero, dIndex) {
                            // 回显表单数据
                            form.val('authoritiesEditForm', mData);
                            // 表单提交事件
                            form.on('submit(authoritiesEditSubmit)', function (data) {
                                data.field.parentId = insXmSel.getValue('valueStr');
                                var newNode = new Object();
                                newNode["authorityId"] = parseInt(data.field.authorityId) + 1
                                newNode["orderNumber"] = parseInt(data.field.authorityId) + 1
                                newNode["authorityName"] = data.field.authorityName
                                newNode["authority"] = data.field.authority
                                newNode["isMenu"] = parseInt(data.field.isMenu)
                                newNode["menuUrl"] = data.field.menuUrl
                                newNode["parentId"] = parseInt(data.field.parentId)
                                newNode["menuIcon"] = null
                                Date.prototype.Format = function (fmt) { // author: meizz
                                    var o = {
                                        "M+": this.getMonth() + 1, // 月份
                                        "d+": this.getDate(), // 日
                                        "h+": this.getHours(), // 小时
                                        "m+": this.getMinutes(), // 分
                                        "s+": this.getSeconds(), // 秒
                                        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
                                        "S": this.getMilliseconds() // 毫秒
                                    };
                                    if (/(y+)/.test(fmt))
                                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                                    for (var k in o)
                                        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                                    return fmt;
                                }
                                newNode["createTime"] = new Date().Format("yyyy-MM-dd hh:mm:ss")
                                newNode["updateTime"] = new Date().Format("yyyy-MM-dd hh:mm:ss")
                                newNode["open"] = true
                                // console.log(newNode)
                                var tree = insTb.options.data[0]            //tt.options.data中存放着整个树
                                var addNode = newNode.authorityId              //delNode记录待添加的节点号
                                // console.log(insTb)
                                let node = []
                                let res = []
                                var nodeNum = 0;
                                node.push(tree)
                                while(node.length != 0) {                        //使用一个队列实现遍历整棵树
                                    // if(addNode > )
                                    nodeNum = nodeNum + 1;
                                    var temp = node.shift()
                                    // console.log(temp)
                                    var tempcopy = new Object()
                                    if(temp.authorityId == addNode) {
                                        res.push(newNode)
                                    }
                                    if(temp.authorityId >= addNode) {       //待添加节点会增加到其父节点的第一个子节点(父节点编号10,则新增节点编号11)
                                        tempcopy["authorityId"] = temp.authorityId + 1      //所以所有编号在10之后的向后一位
                                        tempcopy["orderNumber"] = temp.authorityId + 1
                                    } else {
                                        tempcopy["authorityId"] = temp.authorityId
                                        tempcopy["orderNumber"] = temp.authorityId
                                    }
                                    tempcopy["authorityName"] =temp.authorityName
                                    tempcopy["authority"] = temp.authority
                                    tempcopy["isMenu"] = temp.isMenu
                                    tempcopy["menuUrl"] = temp.menuUrl
                                    if(temp.parentId >= addNode) tempcopy["parentId"] = temp.parentId + 1       //同理,对应的父节点也向后一位
                                    else tempcopy["parentId"] = temp.parentId
                                    tempcopy["menuIcon"] = null
                                    tempcopy["createTime"] = temp.createTime
                                    tempcopy["updateTime"] = temp.updateTime
                                    tempcopy["open"] = true
                                    res.push(tempcopy)
                                    // console.log(temp)
                                    if(temp.children != undefined)                  //继续向后遍历
                                        for(var i = temp.children.length - 1; i >= 0; i--){
                                            node.unshift(temp.children[i])
                                        }
                                }
                                if(nodeNum < addNode)
                                    res.push(newNode)
                               //  console.log(tree)
                               // console.log(res)
                                for(var i = 0; i < res.length;i ++){
                                    res[i] = JSON.stringify(res[i])
                                }
                                console.log(res)
                                var loadIndex = layer.load(2);
                                $.ajax({
                                    url:'request/changeMongoJson',
                                    type:'POST',
                                    async: false,
                                    traditional: true,
                                    data:{"res": res, "name": "user1"},
                                    success:function(response){
                                        res = []
                                        node = []
                                        layer.close(dIndex);
                                        layer.close(loadIndex)
                                        layer.msg("添加成功", {icon: 1});
                                        insTb.refresh();
                                    },
                                    error:function(status){
                                        //失败后执行的代码
                                        // alert("fail")
                                    }
                                })
                                return false;
                            });
                            // 渲染下拉树
                            var insXmSel = xmSelect.render({
                                el: '#authoritiesEditParentSel',
                                height: '0px',
                                data: insTb.options.data,
                                initValue: mData ? [mData.authorityId] : [],
                                model: {label: {type: 'text'}},
                                prop: {
                                    name: 'authorityName',
                                    value: 'authorityId'
                                },
                                radio: true,
                                clickClose: true,
                                tree: {
                                    show: true,
                                    indent: 15,
                                    strict: false,
                                    expandedKeys: true
                                }
                            });
                            // 弹窗不出现滚动条
                            $(layero).children('.layui-layer-content').css('overflow', 'visible');
                        }
                    });
                else
                    layer.msg("这不是一个菜单", {icon: 2});
            }
    

    3. 后端

    后端只需接收相应的字符串数组,将其封装为标准的Json格式并写入MongoDB数据库中。

        @RequestMapping(path = "/changeMongoJson", method = RequestMethod.POST)
        @ResponseBody
        public String changeMongoJson(String[] res, String name){
            for (String s:res
                 ) {
                System.out.println(s);
            }
            int len = res.length;
            StringBuilder sb = new StringBuilder();
            sb.append("{\n" +
                    "  \"code\": 0,\n" +
                    "  \"msg\": \"\",\n" +
                    "  \"count\": "+ len +",\n" +
                    "  \"name\": \""+ name +"\",\n" +
                    "  \"data\": [");
            for(String temp : res){
                sb.append(temp + ",");
            }
            sb.deleteCharAt(sb.length() - 1);
            sb.append(" ]\n" +
                    "}");
    
            Query query = new Query(Criteria.where("name").is("user1"));
    //        query.fields().exclude("_id").include("data");
    //        Update update = new Update();
    //        update.set("count", res.length);
    //        update.push("data", res);
            mongoTemplate.remove(query, Map.class,  "User");
    //        System.out.println(1);
    //        System.out.println(sb);
            mongoTemplate.insert(sb.toString(), "User");
    //        System.out.println(sb);
    //        Gson gson = new Gson();
    //        TreeNode temp = gson.fromJson(res, TreeNode.class);
            return "iframe/index.html";
        }
    

    方法二:基于Dtree实现的纯前端树形增删改

    这个方法对后端访问频率低,在增删改时直接进行前端树样式的变换,即不是依靠先存入后端,再从后端读数据的模式,减少了数据库访问量。
    实现效果图:
    在这里插入图片描述
    Dtree组件已经给出了前端修改的具体方法,只需调用对应方法,即可以实现树结构变更:

    1. 改–DTree1.changeTreeNodeEdit(true);
    2. 增–DTree1.changeTreeNodeAdd(treeNode.nodeId);
    3. 删–DTree1.changeTreeNodeDel(true);
    <script type="text/javascript">
        layui.extend({
            dtree: '../assets/module/dtree/dtree'
        }).use(['element','layer', 'table', 'code' ,'util', 'dtree', 'form'], function(){
            var element = layui.element, layer = layui.layer, table = layui.table, util = layui.util, dtree = layui.dtree, form = layui.form, $ = layui.$;
            var olddata;
            // $.ajax({
            //     async: false,
            //     url: 'iframe/test2.json',
            //     success: function(res){
            //         olddata = res;
            //         console.log(olddata)
            //     }
            // })
            var DTree1 = dtree.render({
                async: false,
                elem: "#demoTree",
                method: "GET",
                url: 'iframe/test2.json',
                // data: data,
                toolbar:true,
                scroll:"#toolbarDiv",
                dataFormat: "list",  //配置data的风格为list
                toolbarFun: {
                    addTreeNode: function(treeNode, $div){
                        console.log(treeNode)
                        var id = treeNode.nodeId.replaceAll("_node_", "00")
                        var title = treeNode.context
                        var parentId = treeNode.parentId.replaceAll("_node_", "00")
                        $.ajax({
                            type: "post",
                            traditional: true,
                            data: {"status": "add", "filename": "test2","id": id, "title": title, "parentId": parentId},
                            url: "request/changenewJson",
                            success: function(result){
                                DTree1.changeTreeNodeAdd(treeNode.nodeId); // 添加成功,返回ID
                                // DTree1.changeTreeNodeAdd(true); // 添加成功
                                // DTree1.changeTreeNodeAdd(result); // 添加成功,返回一个JSON对象
                                // DTree1.changeTreeNodeAdd("refresh"); // 添加成功,局部刷新树
                            },
                            error: function(){
                                DTree1.changeTreeNodeAdd(false); // 添加成功,返回ID
                            }
                        });
                    },
                    editTreeNode: function(treeNode, $div){
                        console.log(treeNode)
                        if (treeNode.nodeId === "000") {
                            layer.msg("根目录无法修改" , {icon: 2})
                            DTree1.changeTreeNodeEdit(false);//修改失败
                            return
                        }
                        var id = treeNode.nodeId.replaceAll("_node_", "00")
                        var title = treeNode.context
                        var parentId = treeNode.parentId.replaceAll("_node_", "00")
                        $.ajax({
                            type: "post",
                            traditional: true,
                            data: {"status": "edit", "filename": "test2","id": id, "title": title, "parentId": parentId},
                            url: "request/changenewJson",
                            success: function(result){
                                DTree1.changeTreeNodeEdit(true);// 修改成功
                                //DTree1.changeTreeNodeEdit(result.param); // 修改成功,返回一个JSON对象
                            },
                            error: function(){
                                DTree1.changeTreeNodeEdit(false);//修改失败
                            }
                        });
                    },
                    delTreeNode: function(treeNode, $div){
                        console.log(treeNode)
                        if (treeNode.nodeId === "000") {
                            layer.msg("根目录无法删除" , {icon: 2})
                            DTree1.changeTreeNodeDel(false);// 删除失败1
                            return
                        }
                        var id = treeNode.nodeId.replaceAll("_node_", "00")
                        var title = treeNode.context
                        var parentId = treeNode.parentId.replaceAll("_node_", "00")
                        $.ajax({
                            type: "post",
                            traditional: true,
                            data: {"status": "del", "filename": "test2","id": id, "title": title, "parentId": parentId},
                            url: "request/changenewJson",
                            success: function(result){
                                DTree1.changeTreeNodeDel(true); // 删除成功
                            },
                            error: function(){
                                DTree1.changeTreeNodeDel(false);// 删除失败
                            }
                        });
                    }
                }
            });
    
            dtree.on("node(demoTree)", function(obj){
                layer.msg(JSON.stringify(obj.param));
            })
        });
    </script>
    

    文中的组件地址

    本文给出两种树形表格的实现方式,前者是基于EasyWeb-iframe框架实现;后者是基于Dtree组件实现。
    EasyWeb-iframe下载地址:easyweb
    Dtree组件下载地址:Dtree

    展开全文
  • <p>layui中使用了渲染表格 在cols属性中增加了fieId倒计时字段  <p>templet:function中无法实现setTimeout和setInterval函数 请问怎么试下这个每秒更新功能</p>
  • layui中如何对表格数据进行操作发布时间:2020-06-24 21:02:31...一、update正如上面说的obj.update(data)有诸多限制,优点上来说就是用最小的修改代价,实现数据更新,他就更新参数中的data中的键的数据,不会...
  • 场景,再一次表格展示中需要实时更新数据会通过后台websocket传送给前端。这样layui,table中的url就用不上了,需要使用data动态传值。 请看代码(代码中table嵌套了element,单元格中插入进度条。如果需要看这...
  • 这个解决方案分两种情况 1.如果你的table中并没有url,那么这个很好解决,先获取到目前...//获取之前编辑过的全部数据,前提是编辑数据是要更新缓存,stock_add_table 为表格的id for (var i = 0; i < tableBak.
  • 项目是前后端分离,前端通过layui进行搭建,获取后台是通过layui的js去请求后台url拿到数据之后 渲染到页面上 接下来不讲后端代码,只讲前端如何拿到值,并渲染到页面上。 这个模块的功能是一个后台系统的网站设置...
  • 且有些功能会遇到子窗口完成数据的提交后,进行关闭同时会刷新父窗口的数据,所以此文章分享一下《如何实现Layui框架中完成父窗的刷新功能》当然这里有朋友就会吐槽,现在的项目都是基于SpringBoot + Vue的前后端...
  • jfinal+layui 前后端如何实现数据的接收以及如何在接收数据后关闭弹出层以及刷新表单。 例如更新操作,选中某一条记录修改该记录,跳出弹出层进行修改,修改后点击确定进行修改,修改成功后提示修改成功并关闭弹窗层...
  • 且有些功能会遇到子窗口完成数据的提交后,进行关闭同时会刷新父窗口的数据,所以此文章分享一下《如何实现Layui框架中完成父窗的刷新功能》当然这里有朋友就会吐槽,现在的项目都是基于SpringBoot + Vue的前后端...
  • layui表格修改(编辑)功能的实现,弹出表单框进行编辑,然后表单数据自动刷新 (1)主界面 本系统没有采用分页数据请求,直接取出后台全部数据 (2)点击编辑按钮,编辑功能界面展示 (3)代码实现 &...
  • layui表单数据重载 全局搜索

    千次阅读 2020-02-23 16:16:58
    实现代码如下,重载方法中的where是新增的参数,就是你原来加载数据列表的参数(如url、method等)也会附带上,不过新添加了where中的参数。 <body> <select id="finishStatus"> ...... </select&...
  • SpringBoot+Layui+Ajax实现登录操作

    千次阅读 2020-09-28 11:34:16
    SpringBoot+Layui+Ajax实现登录操作前言一、什么是 AJAX ?二、使用步骤1.编辑前端界面2.Ajax3....通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对
  • CRUD create(添加)、read(读取)、update(更新)、delete(删除...关闭要清空内容,打开渲染数据,修改时采用了隐藏域传输id,因为把id那一栏给警用掉了,表单数据获取的时候少了id,而后台接收数据的时候要根据...
  • LayUi框架中树形组件tree官方还在持续完善中,目前最新版本为v2.5.5 官方树形组件目前还不支持懒加载方式,我自己修改了下最新源码tree.js,简单粗暴的方式支持懒加载模式。(Ps:最新更新2019-9-23 09:59:00) 我...
  • 第三步:代码实现。...layui.config({version: '1545041465443' //为了更新 js 缓存,可忽略});layui.use(['laydate', 'laypage', 'table', 'element'], function(){var laydate = layui.laydate //日期,la...
  • 我这边只是针对数据显示的问题做了解释。并没有增删改查。找增删改查的同学可以不用看了。 做出这样的效果,首先我们要借用LayUI的内置插件,treetable.js 网上有很多,之前看一个文档里说LayUI不自带这个插件,...
  • 1:把数据导进layui就花了很长时间,要自己写个jar包,在jar里实现导入数据和分页.(建议在学完框架后再来回头看这个知识点) 2:增删改查好像是js里写的,以后再研究下.先把代码贴上. package ...
  • 坚持不易,各位朋友如果觉得项目还不错的话可以给项目一个star吧,也是对我们一直更新代码的一种鼓励啦,谢谢各位的支持。 该项目基于原项目二次开发的Spring Boot实践项目,后台和博客的分页和评论采用全新的layui...
  • 数据驱动:是自动化的一个进步,从本意来讲,数据的改变(更新)驱动自动化的执行,从而引起结果改变。相当于把测试数据进行参数化,输入数据的不同从而引起输出结果的变化。一、读取txt文件实现参数化准备...
  • layui 搭建页面

    千次阅读 2019-07-04 09:24:15
    3.更新:切换到案件录入数据填入,实现部分内容的编辑 4.案件录入:点击实现新案件的创建 项目目录:https://github.com/zjl9339/web/tree/layui 一.首页搭建 1.index.html <!DOCTYPE html> <html>...
  • 二、首先ztree有特别好的中文 API,目前现在更新到3.5.40版本,大家可以直接去官网下载它的类库(js,css,demo,api),这里我就不提供了。 ztree官网:http://www.treejs.cn/v3/api.php 三、开始操作 1.首先要先引入...
  • 预计实现效果通过点击编辑按钮,能够把该行数据显示在表格中table.html页面所属表格截取一行:edit.html页面:实现代码table.html关键代码,传递参数// 监听更新(编辑)操作table.on('tool(currentTableFilter)', ...
  • 先看下我要实现的功能 点击添加,弹出一个富文本编辑器,这个弹框有layer和TinyMCE组成 更新:回显内容 弹出层的页面的单独来一个,因为用的是iFrame 编辑页面,addOrUpdate.html,js代码 <script ...
  • 青锋管理系统是一个后台系统...一,Shiro版(本版本开源)【持续更新】: 1,采用技术:springboot,layui,Thymeleaf,自定义权限(菜单,功能按钮,数据),quartz,swagger,druid连接处,多数据源,shiro ,redis等
  • 实现:开始是正常的列表,当加了条件后重载表格,显示记录集是查询条件后的数据 正常数据: 点击“查看全部已经分配的用户”按钮时,只返回已经分配用户的数据,   1、模板 &lt;!DOCTYPE html&gt...
  • 预计实现效果通过点击编辑按钮,能够把该行数据显示在表格中table.html页面所属表格截取一行:edit.html页面:实现代码table.html关键代码,传递参数// 监听更新(编辑)操作table.on(‘tool(currentTableFilter)‘, ...
  • Spring Boot+JPA微服务中数据更新问题(update) Spring Boot集成X-admin2.2时,Layui字体图标无法正常显示或乱码问题解决方法 LayUi搜索时,如何只刷新表格内容,其他内容不变? ZTree工具类汇总,包括:新增、...

空空如也

空空如也

1 2 3 4
收藏数 71
精华内容 28
关键字:

layui实现更新数据