EasyUi的datagird页面表单、弹出添加修改框、特定列编辑传值给后端、ajax传对象向后台

最新推荐文章于 2022-10-25 14:27:48 发布

姜同学的学习笔记

最新推荐文章于 2022-10-25 14:27:48 发布

阅读量674

点赞数 1

分类专栏： EasyUi 文章标签： easyui

本文链接：https://blog.csdn.net/weixin_45764675/article/details/108445910

版权

EasyUi 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前段页面EasyUi做的

在这里插入图片描述

单位建设性质项目编码项目名称为es索引，搜索数据库筛选过滤条件。
时间插件只能选择年份，选择对应的年份会展示所有该年份的项目对应投资金额，并且会有汇总行，展示所欲查到的数据投资金额汇总
只要不选不选择时间插件的过滤，所有的汇总值显示的是该项目所有年份汇总值的总和
只有选择年份以后查到的结果才可以对投资金额单元格进行编辑，点击按钮可以保存，如果该年投资值存在则修改不存在则添加该项目该年的投资值

废话不多说直接上代码：

主页面project.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>项目测试</title>
    <link rel="stylesheet" type="text/css" href="/ESEasyUi/static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/ESEasyUi/static/easyui/themes/icon.css">
    <script type="text/javascript" src="/ESEasyUi/static/common/jquery.min.js"></script>
    <script type="text/javascript" src="/ESEasyUi/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="/ESEasyUi/static/easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="/ESEasyUi/static/common/validata.form.js"></script>
    <script type="text/javascript" src="/ESEasyUi/static/common/plugin.js"></script>
    <!--    <link rel="stylesheet" type="text/css" href="/ESEasyUi/static/bootstrop/css/bootstrap.css">-->
    <!--    <script type="text/javascript" src="/ESEasyUi/static/bootstrop/js/bootstrap.js"></script>-->
    <script>
        $(function () {
            var editIndex = undefined;
            function endEditing() {                 //该方法用于关闭上一个焦点的editing状态
                if (editIndex == undefined) {
                    return true
                }
                if ($('#project_dg').datagrid('validateRow', editIndex)) {
                    $('#project_dg').datagrid('endEdit', editIndex);
                    editIndex = undefined;
                    return true;
                } else {
                    return false;
                }
            }
            //用户表格接收
            $("#project_dg").datagrid({
                url: '/ESEasyUi/projectController/queryProjectByPage',
                remoteSort: false,
                sortName: "projectPrice",
                sortOrder: "desc",
                method: "get",
                fitColumns: true,
                toolbar: '#tb',
                striped: true,
                pagination: true,
                rownumbers: false,
                singleSelect: true,
                ctrlSelect: true,
                pageSize: 10,
                pageList: [3, 5, 10, 20],
                // onAfterEdit: onAfterEdit,
                queryParams: {
                    projectName: $("#projectNameBox").val(),
                    affiliatedUnit: $("#affiliatedUnitBox").val(),
                    projectId: $("#projectIdBox").val(),
                    buildNature: $("#buildNatureBox").val(),
                    projectTime: $("#projectTimeBox").val()
                },
                onLoadSuccess: function () {
                    var project = {
                        "affiliatedUnit": $("#affiliatedUnitBox").val(),
                        "projectId": $("#projectIdBox").val(),
                        "projectName": $("#projectNameBox").val(),
                        "buildNature": $("#buildNatureBox").val(),
                        "projectTime": $("#projectTimeBox").val()
                    };
                    $.ajax({
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json",
                        data: JSON.stringify(project),
                        url: "/ESEasyUi/projectController/queryTotalSum",
                        success: function (data) {
                            console.log(data);
                            $("#project_dg").datagrid('insertRow', {
                                index: 0,
                                row: {
                                    projectName: '汇总',
                                    affiliatedUnit: "",
                                    projectId: "",
                                    buildNature: "",
                                    projectPrice: data
                                }
                            });
                        },
                    });
                },
                rowStyler: function (index, row) {
                    if (row.projectName == "汇总") {
                        return "background-color:Yellow;";//背景颜色
                    }
                },
                columns: [[

                    {field: 'projectName', title: '项目名称', width: "20%", align: "center"},

                    {field: 'affiliatedUnit', title: '所属单位', width: "20%", align: "center"},

                    {field: 'projectId', title: '项目编码', width: "20%", align: "center"},

                    {field: 'buildNature', title: '建设性质', width: "20%", align: "center"},

                    {
                        field: 'projectPrice', title: '总计划值', width: "20%", align: "center",
                        sortable: true,
                        formatter:function(v){
                            return parseFloat(v).toFixed(2)
                        }
                    }

                ]]
            });

            $("#project_save").click(function () {
                /*获取选中行数据*/
                var selectRow = $('#project_dg').datagrid('getSelected');
                submitForm(selectRow);
            });

            //提交数据
            function submitForm(selectRow) {
                var projectId = selectRow.projectId;//项目id
                var projectTime = $("#projectTimeBox").val();
                var finalProjectPrice = selectRow.projectPrice;//项目修改后计划值
                var reg = new RegExp("^(\\d|[1-9]\\d|100)(\\.\\d{1,2})?$");//正则限制0~100
                if (!reg.test(finalProjectPrice)) {
                    alert('修改失败!请输入0-100的数字，保留两位小数！');
                    return;
                }else {
                    alert("修改"+selectRow.projectName+$("#projectTimeBox").val()+"年计划值为"+finalProjectPrice+"万");
                }
                var project = {
                    "projectName":selectRow.projectName,
                    "projectId": projectId,
                    "projectTime": projectTime,
                    "projectPrice":finalProjectPrice,
                    "affiliatedUnit":selectRow.affiliatedUnit,
                    "buildNature" : selectRow.buildNature
                };
                $.ajax({
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(project),
                    url: "/ESEasyUi/projectController/updateProjectPrice",
                    success: function (data) {
                        if (data == true) {
                            $("#project_dg").datagrid('reload');
                        }
                    }
                })
                $("#project_dg").datagrid('reload');
            }



            //打开修改模态框
            $("#project_edit").click(function () {
                var rows = $("#project_dg").datagrid('getSelections');
                if (rows.length != 1) {
                    $.messager.alert("警告", "请选择一行数据修改");
                    $("#project_dg").datagrid("unselectAll");
                    return
                } else {
                    var row = $("#project_dg").datagrid("getSelected");
                    $("#project_edit_dialog").dialog("open");
                    $("#project_edit_dialog").data("row", row)
                }
            });

            //初始化修改dialog
            $("#project_edit_dialog").dialog({
                width: 400,
                height: 330,
                title: "修改项目",
                top: 120,
                href: '/ESEasyUi/projectform/edit_project.html',
                closed: true,
                closable: true,
                draggable: true,
                cache: false,
                modal: true,
                buttons: [{
                    text: '修改',
                    iconCls: 'icon-ok',
                    handler: function () {
                        $("#project_edit_form").form("submit")
                    }
                }, {
                    text: '重置',
                    iconCls: 'icon-redo',
                    handler: function () {
                        $("#project_edit_form").form("clear")
                    }
                }],
                onLoad: function () {
                    /*
                    * 修改默认部分赋值
                    * */
                    $("#project_edit_form").form("load", $("#project_edit_dialog").data("row"));
                    $("#projectNameUpdate").prop('value', $("#project_edit_dialog").data("row").projectName);
                    $("#projectIdUpdate").prop('value', $("#project_edit_dialog").data("row").projectId);
                    $("#affiliatedUnitUpdate").combobox('select', $("#project_edit_dialog").data("row").affiliatedUnit);
                    $("#buildNatureUpdate").combobox('select', $("#project_edit_dialog").data("row").buildNature);
                    // $("#projectTimeUpdate").datebox('setValue', $("#project_edit_dialog").data("row").projectTime);
                    // $("#projectPriceUpdate").prop('value', $("#project_edit_dialog").data("row").projectPrice);

                }
            });

            //打开添加模态框
            $("#project_add").click(function () {
                //打开添加模态框
                $("#project_add_dialog").dialog("open")
            });

            //初始化添加dialog
            $("#project_add_dialog").dialog({
                height: 420,
                width: 400,
                title: "添加项目",
                top: 120,
                href: "/ESEasyUi/projectform/addProject.html",
                closed: true,
                closable: true,
                draggable: false,
                cache: false,
                modal: true,
                buttons: [{
                    text: '取消',
                    handler: function () {
                        $("#project_add_dialog").dialog("close");
                        $("#project_dg").datagrid("reload")
                    }
                }, {
                    text: '确认',
                    handler: function () {
                        $("#project_add_form").form("submit")
                    }
                }]
            });

            // 查询事件----核心
            $("#submit_search")
                .click(function () {
                    var project = {
                        "affiliatedUnit": $("#affiliatedUnitBox").val(),
                        "projectId": $("#projectIdBox").val(),
                        "projectName": $("#projectNameBox").val(),
                        "buildNature": $("#buildNatureBox").val(),
                        "projectTime": $("#projectTimeBox").val()
                    };
                    $("#project_dg").datagrid({
                        url: '/ESEasyUi/projectController/queryProjectByPage',
                        method: "get",
                        fit: true,
                        fitColumns: true,
                        toolbar: '#tb',
                        striped: true,
                        pagination: true,
                        rownumbers: false,
                        singleSelect: false,
                        ctrlSelect: true,
                        pageSize: 10,
                        pageList: [3, 5, 10, 20],
                        queryParams: {
                            projectName: $("#projectNameBox").val(),
                            affiliatedUnit: $("#affiliatedUnitBox").val(),
                            projectId: $("#projectIdBox").val(),
                            buildNature: $("#buildNatureBox").val(),
                            projectTime: $("#projectTimeBox").val()
                        },
                        onLoadSuccess: function () {
                            $.ajax({
                                type: "post",
                                dataType: "json",
                                contentType: "application/json;charset=UTF-8",
                                data: JSON.stringify(project),
                                url: "/ESEasyUi/projectController/queryTotalSum",
                                success: function (data) {
                                    console.log(data);
                                    $("#project_dg").datagrid('insertRow', {
                                        index: 0,
                                        row: {
                                            projectName: '汇总',
                                            affiliatedUnit: "",
                                            projectId: "",
                                            buildNature: "",
                                            projectPrice: data
                                        }
                                    });
                                },
                                error: function (message) {

                                }
                            });
                        },
                        rowStyler: function (index, row) {
                            if (row.projectName == "汇总") {
                                return "background-color:Yellow;";//背景颜色
                            }
                        },
                        columns: [[

                            {field: 'projectName', title: '项目名称', width: "20%", align: "center"},

                            {field: 'affiliatedUnit', title: '所属单位', width: "20%", align: "center"},

                            {field: 'projectId', title: '项目编码', width: "20%", align: "center"},

                            {field: 'buildNature', title: '建设性质', width: "20%", align: "center"},

                            {
                                field: 'projectPrice', title: '计划值', width: "20%", align: "center",
                                sortable: true,
                                editor: {
                                    type: "numberbox",
                                    options: {
                                        precision: 2
                                    }
                                },
                                formatter:function(v){
                                    return parseFloat(v).toFixed(2)
                                }
                            }

                        ]],
                        onDblClickCell: function (index, field, value) {
                            if ($("#projectTimeBox").val()!=""){
                                if (endEditing()) {
                                    if(field=="projectPrice"){
                                        $(this).datagrid('beginEdit', index);
                                        var ed = $(this).datagrid('getEditor', {index:index,field:field});
                                        // $(ed.target).focus();
                                    }
                                    editIndex = index;
                                }
                                $('#project_dg').datagrid('onClickRow')
                            }
                        }
                    });
                });
        });

        /*年份插件*/
        function yearFormatter(date) {
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            var d = date.getDate();
            return y;
        };

        //年份插件
        function yearParser(s) {
            if (!s) return new Date();
            var y = s;
            var date;
            if (!isNaN(y)) {
                return new Date(y, 0, 1);
            } else {
                return new Date();
            }
        }
    </script>
</head>
<table id="tb">
    <div>
        <!--单位下拉列表-->
        &nbsp;&nbsp;&nbsp;&nbsp;单位:
        <input class="easyui-combobox" id="affiliatedUnitBox" name="affiliatedUnitBox" style="width:150px"
               data-options="valueField:'city',textField:'city',url:'/ESEasyUi/projectController/queryAllProjectAffiliatedUnit',prompt: '请选择所属单位'"/>
        <!--建设性质下拉列表-->
        &nbsp;&nbsp;&nbsp;&nbsp;建设性质:
        <select class="easyui-combobox" name="buildNatureBox" id="buildNatureBox" style="width: 90px">
            <option value="新建">新建</option>
            <option value="扩建">扩建</option>
            <option value="增容改造">增容改造</option>
            <option value="" selected="selected">请选择</option>
        </select>

        <!--年份下拉列表-->
        &nbsp;&nbsp;&nbsp;&nbsp;年份:
        <input class="easyui-datebox" id="projectTimeBox" name="projectTimeBox"
               data-options="formatter:yearFormatter,parser:yearParser,prompt: '请选择'" style="width: 100px"/>

        <!--  项目编码-->
        &nbsp;&nbsp;&nbsp;&nbsp;项目编码:
        <input name="projectIdBox" id="projectIdBox" class="easyui-textbox"
               data-options="prompt: '请填写'"
               style="width:120px">

        <!--  项目名称-->
        &nbsp;&nbsp;&nbsp;&nbsp;项目名称:
        <input name="projectNameBox" id="projectNameBox" class="easyui-textbox"
               data-options="prompt: '请填写' "
               style="width:120px">

        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <button id="submit_search" style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">
            查询
        </button>
        &nbsp;<button id="project_add"
                      style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">新增项目
    </button>
        &nbsp;<button id="project_edit"
                      style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">修改项目
    </button>
        &nbsp;<button id="project_save"
                      style="background-color: #00ee00;color: white;border-radius: 5px;border-style: none">保存
    </button>
    </div>
</table>
<br>
<table id="project_dg" class="easyui-datagrid"></table>
<!--修改对话框-->
<div id="project_edit_dialog"></div>
<div id="project_add_dialog"></div>

添加页面addproject.html

<script>
    $("#project_add_form").form({
        url: "/ESEasyUi/projectController/addProject",
        onSubmit: function () {
            return $("#project_add_form").form("validate")
        },
        success: function (data) {
            $("#project_add_dialog").dialog("close");
            $("#project_dg").datagrid("reload")
        }
    })

    /*年份插件*/
    function yearFormatter(date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return y;
    };

    //年份插件
    function yearParser(s) {
        if (!s) return new Date();
        var y = s;
        var date;
        if (!isNaN(y)) {
            return new Date(y, 0, 1);
        } else {
            return new Date();
        }
    }
</script>
<form id="project_add_form" method="post">

    <!--项目名称-->
    <div style="height: 40px;margin-top: 30px;padding: 0 10% 0 10%">
        <div style="float: left">
            项目名称:
        </div>
        <div style="float: right">
            <input name="projectName" class="easyui-textbox"
                   data-options="required:true,validType:'remote[\'/ESEasyUi/projectController/existsProject\',\'projectName\']',prompt:'项目之间不可重复、必填'"
                   style="height:100%;width:100%">
        </div>
    </div>

    <!--所属单位-->

    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float: left">
            所属单位:
        </div>
        <div style="float: right">
            <input class="easyui-combobox" id="affiliatedUnit" name="affiliatedUnit" style="width:100%"
                   data-options="valueField:'city',textField:'city',url:'/ESEasyUi/projectController/queryAllProjectAffiliatedUnit',prompt: '请选择所属单位',required:true"/>

        </div>
    </div>


    <!--建设性质下拉列表-->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float: left">
            建设性质:
        </div>
        <div style="float: right">
            <select class="easyui-combobox" name="buildNature" id="buildNature" data-options="required:true" style="width: 100%">
                <option value="新建">新建</option>
                <option value="扩建">扩建</option>
                <option value="增容改造">增容改造</option>
            </select>
        </div>
    </div>

    <!--  项目时间  -->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float: left">
            投产年份:
        </div>
        <div style="float: right">
            <input type="text" name="projectTime" class="easyui-datebox"
                   data-options="required:true,prompt:'请选择年份',formatter:yearFormatter,parser:yearParser"
                   style="height: 100%;width: 100%">
        </div>
    </div>

    <!--  项目计划值  -->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float: left">
            当年计划值:
        </div>
        <div style="float: right">
            <input id="projectPrice" name="projectPrice" class="easyui-numberbox"
                   data-options="min:0,max:100,precision:2,required:true,prompt:'请填写 0~100',validType:['number']"
                   style="height: 100%;width: 100%"/>
        </div>
    </div>
</form>

修改页面edit_project.html

<script>
    $("#project_edit_form").form({
        url: "/ESEasyUi/projectController/updateProject",
        onSubmit: function () {
            // alert("执行到了！！！！");
            return $("#project_edit_form").form("validate")
        },
        success: function (data) {
            $("#project_edit_dialog").dialog("close");
            $("#project_dg").datagrid("reload")
        }
    })

</script>
<form id="project_edit_form" method="post">
    <!--项目名称-->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float:left">
            项目名称：
        </div>
        <div style="float:right">
            <input id="projectNameUpdate" name="projectName" class="easyui-textbox" data-options="required:true"
                   style="height:100%;width:100%">
            <!--validType:'remote[\'/ESEasyUi/projectController/existsProject\',\'projectName\']',-->
        </div>
    </div>

    <!--项目编码-->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float:left">
            项目编码：
        </div>
        <div style="float:right">
            <input id="projectIdUpdate" name="projectId" readonly="readonly" class="easyui-textbox"
                   data-options="required:true" style="height:100%;width:100%;">
        </div>
    </div>

    <!--所属单位-->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <div style="float: left">
            所属单位:
        </div>
        <div style="float: right">
            <input class="easyui-combobox" id="affiliatedUnitUpdate" name="affiliatedUnit" style="width:100%"
                   data-options="required:true,valueField:'city',textField:'city',url:'/ESEasyUi/projectController/queryAllProjectAffiliatedUnit',prompt: '请选择所属单位',required:true"/>

        </div>
    </div>

    <!--建设性质下拉列表-->
    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">
        <select class="easyui-combobox" name="buildNature" id="buildNatureUpdate" data-options="required:true" style="height:100%;width:100%">
            <option value="新建">新建</option>
            <option value="扩建">扩建</option>
            <option value="增容改造">增容改造</option>
        </select>
    </div>

<!--    &lt;!&ndash;  项目时间  &ndash;&gt;-->
<!--    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">-->
<!--        <input type="text" id="projectTimeUpdate" name="projectTime" class="easyui-datebox"-->
<!--               data-options="required:true,prompt:'项目时间'" style="height: 100%;width: 100%">-->
<!--    </div>-->

    <!--  项目计划值  -->
<!--    <div style="height: 40px;margin-top: 15px;padding: 0 10% 0 10%">-->
<!--        <input id="projectPriceUpdate" name="projectPrice" class="easyui-textbox"-->
<!--               data-options="required:true,prompt:'项目计划值'" style="height: 100%;width: 100%">-->
<!--    </div>-->

</form>

姜同学的学习笔记

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
EasyUi的datagird页面表单、弹出添加修改框、特定列编辑传值给后端、ajax传对象向后台

一、前段页面EasyUi做的单位建设性质项目编码项目名称为es索引，搜索数据库筛选过滤条件。时间插件只能选择年份，选择对应的年份会展示所有该年份的项目对应投资金额，并且会有汇总行，展示所欲查到的数据投资金额汇总只要不选不选择时间插件的过滤，所有的汇总值显示的是该项目所有年份汇总值的总和只有选择年份以后查到的结果才可以对投资金额单元格进行编辑，点击按钮可以保存，如果该年投资值存在则修改不存在则添加该项目该年的投资值废话不多说直接上代码：主页面project.html<!
复制链接

扫一扫