二〇二三-三-三十——产品修改、新闻增删改查

最新推荐文章于 2024-07-11 20:55:36 发布

NameofMacro

最新推荐文章于 2024-07-11 20:55:36 发布

阅读量90

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/BEHEMOOTH/article/details/129864689

版权

产品修改、新闻新增、修改、删除

产品修改

修改html页面
编写js文件
1. 加载form表单
2. 加载产品类型
3. 将需要修改的数据赋值到表单
  
  遇到的问题
  
  1.layui 单行选择框赋值成功，但是框上不显示选中的值：将单行选择框赋值后需要再次渲染表单
  
  2.上传图片控制台报错“upload.render undefined”： layui未加载upload模板
4. 点击提交按钮提交

新闻新增、修改、删除

新闻列表显示

修改html页面

js页面渲染表单

table.render({
    elem: '#table',
    url: '/back/news/findall', // 此处为静态模拟数据，实际使用时需换成真实接口,
    parseData: function (res) { //res 即为原始返回的数据
        console.log(res)
        return {
            "code": res.code, //解析接口状态
            "msg": res.msg, //解析提示文本
            "count": res.count, //解析数据长度
            "data": res.data //解析数据列表
        };
    }
    , page: true
    , cols: [[
        {field: 'id', fixed: 'left', width: 80, title: 'ID', sort: true}
        , {field: 'title', width: 80, title: '标题'}
        , {field: 'typeName', width: 80, title: '新闻类型'}
        , {field: 'content', title: '内容'}
        , {field: 'time', title: '日期'}
        , {
            field: 'enable', title: '状态', templet: function (d) {
                return d.enable === 1 ? "启用" : "禁用"
            }
        }
        , {field: 'createTime', title: '创建时间'}
        , {field: 'updateTime', title: '更新时间'}
        , {fixed: 'right', title: '操作', width: 230, minWidth: 125, toolbar: '#barDemo'}
    ]]
});

新闻添加

修改html页面，添加表单

日期选择器

<!--                
日期选择器 html-->
<label for="time" class="layui-form-label">
    <span class="x-red">*</span>日期</label>
<div class="layui-input-inline">
    <input type="text" id="time" value="2023-1-1" name="time" placeholder="yyyy-MM-dd"
           required=""
           lay-verify="time" autocomplete="off" class="layui-input"></div>

//1. 加载模板
layui.use('laydate',function(){})

//2.执行一个laydate实例
laydate.render({
    elem: '#time',
    trigger:'click'  //强制打开日期选择框
});

添加按钮事件

<button class="layui-btn" onclick="xadmin.open('添加新闻','/html/news/news-add.html',600,400)"><i
        class="layui-icon"></i>添加
</button>

表单加载顺序：

新闻类型加载

ajax从servlet获取数

function findAllType() {
    $.ajax({
        url: '/back/news_type/findall',
        data: {enable: 1},
        type: 'get',
        dataType: 'json',
        success: function (res) {
            console.log(res.data);
            //    将得到的值赋给下拉菜单
            setTypeData(res.data);

        },
    })
}

for循环进行div赋值，然后渲染表单

function setTypeData(data) {
    let html = '';
    for (let i = 0; i < data.length; i++) {
        html += '<option value="' + data[i].id + '">' + data[i].name + '</option>';
    }
    $("#type_id").html(html)
    //表单渲染
    form.render();
}

监听表单提交按钮

```
form.on('submit(add)',
```

获取单行选择框值

let typeId = document.getElementById("type_id");	//括号内的名称是 select 标签id
let type_id = typeId.options[typeId.selectedIndex].value;

新闻修改

赋值产品修改html 和js ，添加日期选择器

新闻删除

html页面添加 js

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

渲染列表js中添加一列

 {fixed: 'right', title: '操作', width: 230, minWidth: 125, toolbar: '#barDemo'}

监听工具类按钮事件

//触发单元格工具事件
table.on('tool(table)', function (obj) { // 双击 toolDouble
    let data = obj.data;
    if (obj.event === 'del') {
        console.log(data.id);
        layer.confirm('真的删除行么', function (index) {
            $.ajax({
                url: '/back/news/delete',
                data: {"id": data.id},
                type: "post",
                dataType: 'json',
                success: function (res) {
                    if (res.count > 0) {
                        layer.alert("删除成功", {icon: 6});
                    } else {
                        layer.alert("删除失败");
                    }
                }
            })
            obj.del();
            layer.close(index),
            location.reload();
        });
    }
    else if (obj.event === 'edit') {
        console.log(data);
        sessionStorage.setItem("newsId", data.id);
        xadmin.open('编辑','/html/news/news-update.html',600,400);
    }
});