js动态添加datagrid表头&批量保存实战研究

简介: 最近小编在做项目的时候,遇到了这样一个需求:如下图所示,表头中的"一般"和"优秀"是动态添加的,添加上对应的票数之后,选中多行,单击保存,将动态添加的列数据转换成行保存到数据库中

一、背景简介


   最近小编在做项目的时候,遇到了这样一个需求:如下图所示,表头中的"一般"和"优秀"是动态添加的,添加上对应的票数之后,选中多行,单击保存,将动态添加的列数据转换成行保存到数据库中


20160421232912451.png


   表结构:如下图所示


20160421232925701.png


   项目框架:MVC+WCF+EF

   兼容浏览器:Google


二、解决思路一


   首先取表头信息,然后取改变的行数据,通过表头ID对应的取数据信息,组合到一起,然后一起提交到controller中

   HTML代码


<span style="font-family:KaiTi_GB2312;font-size:18px;">-
<div title="未录入单位" style="padding: 10px">
        <table id="dgno" class="easyui-datagrid" style="width: 1070px; height: auto"
            data-options="
            iconCls: 'icon-edit',
                 toolbar: '#toolbarno',
                rownumbers:true,
                url: 'datagrid_data1.json',
                method:'get',
            onClickCell: onClickCell">
        </table>
        <div id="toolbarno">
            <a href="javascript:void(0)" id="saveButton" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" οnclick="AddAllData()">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" οnclick="reject()">撤销</a>
        </div>
    </div>
-</span>


   js代码


<span style="font-family:KaiTi_GB2312;font-size:18px;">-
//批量保存表格中填入数据的行值-马康-2016-4-10 19:26:01
function AddAllData() {
    //获取选中行的数据
    var selectRows = $("#dgno").datagrid("getChanges");
    //获取表头数据
    var fields = $("#dgno").datagrid("getColumnFields");
    //获取考核年份
    var CheckYear1 = $('#CheckYear').combobox("getValue");
    //如果没有选中行的话,提示信息
    if (selectRows.length < 1) {
        $.messager.alert("提示消息", "请选择要保存的记录!", "info");
        return;
    }
    //定义一个承接对象的ID
    var CityObjectID = "";
    //定义一个承接档次的ID
    var TargetLevelID = "";
    //定义一个承接票数的值的变量
    var Votes = "";
    //定义一个承接年份的变量
    var CheckYear = "";
    //定义一个承接备注的变量
    var Remark = "";
    //循环将数据添加到对应的列中
    for (var i = 0; i < selectRows.length; i++) {
        //通过动态的表头判断循环的次数
        for (var p = 5; p < fields.length; p++) {
            //取固定列的数据
            CityObjectID += selectRows[i].CityObjectID + ","; //对象ID
            TargetLevelID += fields[p - 1] + ",";             //档次ID
            //通过这样的方式取动态添加的列的数据,票数
            //将SelectRows赋值给变量a
            var a = selectRows[i];
            //循环a的值,取
            for (s in a) {
                if (s == fields[p - 1]) {
                    //将对应的票数赋值给votes
                    Votes += a[s] + ",";
                }
            }
            CheckYear += CheckYear1 + ",";                    //年份
            Remark += selectRows[i].Remark + ",";             //备注
        }
    }
    //因为是批量保存,所以需要循环切割所有的数据
    CityObjectID = CityObjectID.substr(0, CityObjectID.length - 1);   //对象ID
    TargetLevelID = TargetLevelID.substr(0, TargetLevelID.length - 1);//档次ID
    Votes = Votes.substr(0, Votes.length - 1);                        //票数
    CheckYear = CheckYear.substr(0, CheckYear.length - 1);            //年份
    Remark = Remark.substr(0, Remark.length - 1);                     //备注
    //post将获取到的指标ID一起传递到controller中
    $.post('/CityQualitativeResult/AddCityQualitativeResult?CityObjectID=' +
        CityObjectID + '&TargetLevelID=' + TargetLevelID + '&Votes=' +
        Votes + '&CheckYear=' + CheckYear + '&Remark=' + Remark, function (jsonObj) {
            //判断返回值
            if (jsonObj = "true") {
                //成功提示信息
                $.messager.alert('提示', '保存成功!');
                //保存成功后刷新页面
                $("#Targetdg").datagrid("reload");
                //解决保存后全选问题
                $('#Targetdg').datagrid('clearSelections');
            } else {
                //失败提示信息
                $.messager.alert('提示信息', '保存失败,请联系管理员!', 'warning');
            }
        });
}
-</span>


   controller代码


<span style="font-family:KaiTi_GB2312;font-size:18px;">-
        #region AddQualitativeTarget 添加定性指标-马康-2016-3-10 1:49:45
        /// <summary>
        /// 添加定性指标-马康-2016-3-10 1:49:45
        /// </summary>
        /// <returns></returns>
        public bool AddCityQualitativeResult()
        {
            bool AddOk = false;
            try
            {
                //实例化返回数据的载体
                List<AllQualitativeResultInputViewModel> ListAllQualitativeResultInputVM = new List<AllQualitativeResultInputViewModel>();
                //获取县市区对象ID
                var CityObjectID1 = Request["CityObjectID"];
                //通过分割方式获取县市区对象ID
                string[] CityObjectID2 = CityObjectID1.Split(',');
                //获取指标档次ID
                var TargetLevelID1 = Request["TargetLevelID"];
                //获取指标档次ID
                string[] TargetLevelID2 = TargetLevelID1.Split(',');
                //获取档次对应的分数
                var Votes1 = Request["Votes"];
                //获取档次对应的分数
                string[] Votes2 = Votes1.Split(',');
                //获取年份
                var CheckYear1 = Request["CheckYear"];
                //获取年份
                string[] CheckYear2 = CheckYear1.Split(',');
                //获取备注
                var Remark1 = Request["Remark"];
                //获取备注
                string[] Remark2 = Remark1.Split(',');
                //通过循环将传过来的值保存到实例化的List的ViewModel中
                for (int i = 0; i < CityObjectID2.Length; i++)
                {
                    Guid CityQualitativeResultID = System.Guid.NewGuid();
                    //县市区对象ID
                    Guid CityObjectID = new Guid(CityObjectID2[i]);
                    //获取指标档次ID
                    Guid TargetLevelID = new Guid(TargetLevelID2[i]);
                    //获取档次对应的分数
                    int Votes = int.Parse(Votes2[i]);
                    //获取年份
                    int CheckYear = int.Parse(CheckYear2[i]);
                    //获取备注
                    string Remark = Remark2[i];
                    //向实体中添加数据
                    AllQualitativeResultInputViewModel AllQualitativeResultInputVM = new AllQualitativeResultInputViewModel()
                    {
                        CityQualitativeResultID = CityQualitativeResultID,
                        CityObjectID = CityObjectID,
                        QualitativeLevelID = TargetLevelID,
                        Votes = Votes,
                        CheckYear = CheckYear,
                        Remarks = Remark,
                    };
                    //将实体赋值给List
                    ListAllQualitativeResultInputVM.Add(AllQualitativeResultInputVM);
                }
                //调用服务端添加的方法
                AddOk = ICityQualitativeResult.AddCityQualitativeResult(ListAllQualitativeResultInputVM);
                return AddOk;
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }
        #endregion
-</span>


三、解决思路二


   可以将动态数据用特殊符号区分开,然后一起存到数据库表的票数列(Votes)中,这样的思路避免了对象,年份,备注这些固定列数据的冗余问题。


四、总结感受


   面对一个新需求,首先应该理解它,其次先去想可以实现的思路,对比之后取一个好的然后去实现,再学习另外实现思路与之不同的技术点,这样才能够使我们的思路更加顺畅。

相关文章
|
4月前
|
人工智能 自然语言处理 JavaScript
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
235 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
|
2月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
78 1
|
4月前
|
监控 算法 JavaScript
基于 JavaScript 图算法的局域网网络访问控制模型构建及局域网禁止上网软件的技术实现路径研究
本文探讨局域网网络访问控制软件的技术框架,将其核心功能映射为图论模型,通过节点与边表示终端设备及访问关系。以JavaScript实现DFS算法,模拟访问权限判断,优化动态策略更新与多层级访问控制。结合流量监控数据,提升网络安全响应能力,为企业自主研发提供理论支持,推动智能化演进,助力数字化管理。
92 4
|
4月前
|
监控 算法 JavaScript
公司局域网管理视域下 Node.js 图算法的深度应用研究:拓扑结构建模与流量优化策略探析
本文探讨了图论算法在公司局域网管理中的应用,针对设备互联复杂、流量调度低效及安全监控困难等问题,提出基于图论的解决方案。通过节点与边建模局域网拓扑结构,利用DFS/BFS实现设备快速发现,Dijkstra算法优化流量路径,社区检测算法识别安全风险。结合WorkWin软件实例,展示了算法在设备管理、流量调度与安全监控中的价值,为智能化局域网管理提供了理论与实践指导。
111 3
|
11月前
|
自然语言处理 JavaScript 前端开发
深入理解JavaScript中的闭包:原理与实战
【10月更文挑战第12天】深入理解JavaScript中的闭包:原理与实战
|
6月前
|
存储 算法 JavaScript
基于 Node.js 深度优先搜索算法的上网监管软件研究
在数字化时代,网络环境呈现出高度的复杂性与动态性,上网监管软件在维护网络秩序与安全方面的重要性与日俱增。此类软件依托各类数据结构与算法,实现对网络活动的精准监测与高效管理。本文将深度聚焦于深度优先搜索(DFS)算法,并结合 Node.js 编程语言,深入剖析其在上网监管软件中的应用机制与效能。
86 6
|
6月前
|
监控 JavaScript 前端开发
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
MutationObserver 是一个非常强大的 API,提供了一种高效、灵活的方式来监听和响应 DOM 变化。它解决了传统 DOM 事件监听器的诸多局限性,通过异步、批量的方式处理 DOM 变化,大大提高了性能和效率。在实际开发中,合理使用 MutationObserver 可以帮助我们更好地控制 DOM 操作,提高代码的健壮性和可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
MutationObserver详解+案例——深入理解 JavaScript 中的 MutationObserver:原理与实战案例
|
8月前
|
JavaScript 前端开发 容器
this、self、window、top 在 JavaScript 中的区别深入研究
在 JavaScript 开发中,`this`、`self`、`window` 和 `top` 是四个常用的概念。`this` 指向当前执行上下文的对象,其值取决于函数调用方式;`self` 在全局作用域中等同于 `window`,常用于 Web Workers;`window` 代表浏览器窗口,是全局变量的容器;`top` 指向最顶层窗口,用于判断是否在框架中。理解这些概念有助于编写健壮的代码。
213 1
this、self、window、top 在 JavaScript 中的区别深入研究
|
9月前
Next.js 实战 (二):搭建 Layouts 基础排版布局
本文介绍了作者在Next.js v15.x版本发布后,对一个旧项目的重构过程。文章详细说明了项目开发规范配置、UI组件库选择(最终选择了Ant-Design)、以及使用Ant Design的Layout组件实现中后台布局的方法。文末展示了布局的初步效果,并提供了GitHub仓库链接供读者参考学习。
293 1
Next.js 实战 (二):搭建 Layouts 基础排版布局
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
209 0
Next.js 实战 (六):如何实现文件本地上传