市委组织部考核项目——利用EasyUi中可编辑的DataGrid控件对多行数据进行编辑并提交

http://blog.csdn.net/cjr15233661143/article/details/19041165

市委组织部考核项目中需要录入原始数据,拿开发区的数据录入举例说明,见下图,需要给 查询出的单位录入定量成绩和定性成绩,开始使用弹出框的形式逐条进行编辑,后来考虑如果每一条都需要弹出一次弹出框,每一条都需要一次保存的话,用户可能 会不方便,后来发现了easyui中有这么一个好东西，用在这里非常合适——Cell Editing in DataGrid

查询出的结果图

为了控制提交时的行和他的限制条件我在原来的基础上加上了多选框，也就是说虽然你可以在上边随便写，随便改我都没有把他们真正的保存到数据库，而是在最后
点击"保存"时才写入数据库的,而保存的条件是多选框被选择了,而且所选行的定量成绩和定性成绩都不为空。需求就这么简单,下面就是代码了,前面的查询功
能在这里就不介绍了,主要介绍保存的功能

控件的使用

[plain] view plaincopy

  1. <span style="font-size:18px;">  <table id="dg" class="easyui-datagrid" style="width: 1000px; height: 280px;"
  2. data-options=" iconCls: ‘icon-edit‘,
  3. toolbar: ‘#tb‘,
  4. rownumbers:true,
  5. singleSelect: false,
  6. url: ‘DevelopmentRecord.ashx/ProcessRequest‘,
  7. method:‘get‘,
  8. pagination:true,
  9. onClickCell: onClickCell">
  10. <thead>
  11. <tr>
  12. <th data-options="field:‘ck‘,checkbox:true"></th>
  13. <th data-options="field:‘CityID‘,width:80,hidden:‘hidden‘">开发区id</th>
  14. <th data-options="field:‘DepartmentName‘,width:280">单位名称</th>
  15. <th data-
    options="field:‘QuantyOriginalData‘,width:150,editor:
    {type:‘numberbox‘,options:{min:0}}">定量成绩</th>
  16. <th data-
    options="field:‘QualityOriginalData‘,width:150,editor:
    {type:‘numberbox‘,options:{min:0}}">定性成绩</th>
  17. </tr>
  18. </thead>
  19. </table></span>

代码解释:

开发区id字段和单位名称是从数据库中查询出来的,所以field的内容需要与数据库中表的字段对应，而开发区id字段只是为了我们写代码方便，不需要在页面显示的字段，所以我们使用hidden:‘hidden‘将其隐藏；定量成绩和定性成绩这两个字段是需要编辑的，且内容需要限制为最小为0的数字，使用:editor:{type:‘numberbox‘,options:{min:0}}

js:

[javascript] view plaincopy

  1. <span style="font-size:18px;">        //保存按钮,多条数据一起提交
  2. function saveAllData() {
  3. if (endEditing()) {
  4. //利用easyui控件本身的getChange获取新添加，删除，和修改的内容
  5. if ($("#dg").datagrid(‘getChanges‘).length) {
  6. var inserted = $("#dg").datagrid(‘getChanges‘, "inserted");
  7. var deleted = $("#dg").datagrid(‘getChanges‘, "deleted");
  8. var updated = $("#dg").datagrid(‘getChanges‘, "updated");
  9. var effectRow = new Object();
  10. if (inserted.length) {
  11. effectRow["inserted"] = JSON.stringify(inserted);
  12. }
  13. if (deleted.length) {
  14. effectRow["deleted"] = JSON.stringify(deleted);
  15. }
  16. if (updated.length) {
  17. effectRow["updated"] = JSON.stringify(updated);
  18. }
  19. //利用easyui控件自身的getSelections方法获取多选框被选择的行
  20. var row = $(‘#dg‘).datagrid(‘getSelections‘);
  21. if (row.length < 1) {
  22. alert("请至少选择一条数据！");
  23. return;
  24. }
  25. //必填字段
  26. var must;
  27. if (row.length > 0) {
  28. for (var i = 0; i < row.length; i++) {
  29. mustQuantyOriginalData = row[i].QuantyOriginalData;//定量成绩
  30. mustQualityOriginalData = row[i].QualityOriginalData;//定性成绩
  31. //保证定量成绩和定性成绩都不为空才能继续操作！
  32. if (mustQuantyOriginalData == "" || mustQuantyOriginalData == null || mustQualityOriginalData == "" || mustQualityOriginalData==null) {
  33. alert("成绩不能为空，请核对！");
  34. return;
  35. }
  36. }
  37. }
  38. //用户向一般处理程序传值
  39. document.getElementById("test1").value = "SaveAllData";
  40. var test = document.getElementById("test1").value; //方法
  41. //获取年份
  42. var yearNode = document.getElementById("year");
  43. var checkedYearValue = yearNode.options[yearNode.selectedIndex].text.trim();//获取下拉框选择的年份
  44. var data1 = new Object();//定义对象
  45. var obj = new Object();//定义对象
  46. //将内容写入对象中
  47. obj.yearValue = checkedYearValue;
  48. data1.array = row;
  49. data1.test = test;
  50. data1.obj = obj;
  51. //将对象转换成json字符串
  52. var jsonObject = JSON.stringify(data1);
  53. $.post("DevelopmentRecord.ashx", { action: "post", jsonObject: "" + jsonObject + "" }, function (data) {
  54. if (data = "true") {
  55. alert("保存成功！");
  56. $("#dg").datagrid(‘reload‘);//重新加载table
  57. $("#recorded").datagrid(‘reload‘);//重新加载table
  58. } else {
  59. alert("保存失败，请重新操作！")
  60. }
  61. }, "json");
  62. }
  63. }
  64. }</span>

代码解释：

可编辑的
DataGrid控件，关键就在这个editor属性上，还有它自带的几个方法，像getChanges(),getSelections()啦，当然还
有很多自带的方法这个大家想了解的话可以去api中查看，在这里我就不一一介绍了，其他的就按常理做就可以了，为了将此功能完整的展示给大家看，下面我也
将个个层的代码都贴了出来，如果大家有更好的框架，希望大家推荐给我，互相学习。谢啦。

一般处理程序:

根据隐藏控件的value值去一般处理程序中找对应的方法

[plain] view plaincopy

  1. <span style="font-size:18px;">public void ProcessRequest(HttpContext context)
  2. {
  3. context.Response.ContentType = "text/plain";
  4. JObject objget = (JObject)JsonConvert.DeserializeObject(command);
  5. JArray array1 = objget["array"].Value<JArray>();
  6. String test = objget["test"].Value<String>();
  7. if (test == "SaveAllData")
  8. {
  9. Object Inquire = objget["obj"].Value<object>();
  10. SaveAllData(context, array1, Inquire);
  11. }
  12. }</span>

[javascript] view plaincopy

  1. public void SaveAllData(HttpContext context, JArray objget, Object Inquire)
  2. {
  3. List<DevelopmentRecordEntity> list = new List<DevelopmentRecordEntity>();
  4. for (int i = 0; i < objget.Count; i++)
  5. {
  6. JObject objectget = (JObject)objget[i];
  7. JObject Inquireget = (JObject)Inquire;
  8. //考核时间
  9. string strCheckedYearValue = Inquireget["yearValue"].ToString().Trim();
  10. StringBuilder strWhere1 = new StringBuilder();
  11. //实例化一个实体
  12. DevelopmentRecordEntity developEntity = new DevelopmentRecordEntity();
  13. ////县市区单位名称
  14. //string CityName = Inquireget["checkedCityName"].ToString().Trim();
  15. //开发区Id
  16. string strDevelopeId = objectget["CityID"].ToString().Trim();
  17. //定量成绩
  18. var QuantyOriginalData = objectget["QuantyOriginalData"].ToString().Trim();
  19. //定性成绩
  20. var QualityOriginalData = objectget["QualityOriginalData"].ToString().Trim();
  21. ////时间戳
  22. //PublicBLL publicBll = new PublicBLL();
  23. //string timestamp = publicBll.GetTime();
  24. //将需要保存到数据库中的数据传到实体中
  25. developEntity.DevelopeId = strDevelopeId;
  26. developEntity.QuantyOriginalData = QuantyOriginalData;
  27. developEntity.YearTime = strCheckedYearValue;
  28. //developEntity.Timestamp = timestamp;
  29. developEntity.QualityOriginalData = QualityOriginalData;
  30. //保存数据
  31. list.Add(developEntity);
  32. }
  33. if (developmentBll.Add(list))
  34. {
  35. context.Response.Write("true");
  36. }
  37. else
  38. {
  39. context.Response.Write("false");
  40. }
  41. }

BLL层:

[csharp] view plaincopy

  1. <span style="font-size:18px;"> <span style="white-space:pre">   </span>/// <summary>
  2. /// 保存n条数据,1-25陈金荣
  3. /// </summary>
  4. public bool Add(List<DevelopmentRecordEntity> list)
  5. {
  6. return dal.Add(list);
  7. }</span>

DAL层:

[csharp] view plaincopy

  1. <span style="font-size:18px;">/// <summary>
  2. /// 添加n条数据,1-25陈金荣
  3. /// </summary>
  4. public bool Add(List<DevelopmentRecordEntity> list)
  5. {
  6. bool flag = false;
  7. foreach (DevelopmentRecordEntity model in list)
  8. {
  9. StringBuilder strSql = new StringBuilder();
  10. strSql.Append("insert into T_DevelopmentRecord(");
  11. strSql.Append("DevelopeId,QuantyOriginalData,QuantyWeightData,QualityOriginalData,QualityWeightData,YearTime,Remarks,other2,other3,other4,other5)");
  12. strSql.Append(" values (");
  13. strSql.Append("@DevelopeId,@QuantyOriginalData,@QuantyWeightData,@QualityOriginalData,@QualityWeightData,@YearTime,@Remarks,@other2,@other3,@other4,@other5)");
  14. SqlParameter[] parameters = {
  15. new SqlParameter("@DevelopeId", SqlDbType.VarChar,50),
  16. new SqlParameter("@QuantyOriginalData", SqlDbType.VarChar,50),
  17. new SqlParameter("@QuantyWeightData", SqlDbType.VarChar,50),
  18. new SqlParameter("@QualityOriginalData", SqlDbType.VarChar,50),
  19. new SqlParameter("@QualityWeightData", SqlDbType.VarChar,50),
  20. new SqlParameter("@YearTime", SqlDbType.VarChar,50),
  21. new SqlParameter("@Remarks", SqlDbType.VarChar,500),
  22. //new SqlParameter("@Timestamp", SqlDbType.VarChar,50),
  23. //new SqlParameter("@other1", SqlDbType.VarChar,50),
  24. new SqlParameter("@other2", SqlDbType.VarChar,50),
  25. new SqlParameter("@other3", SqlDbType.VarChar,50),
  26. new SqlParameter("@other4", SqlDbType.VarChar,50),
  27. new SqlParameter("@other5", SqlDbType.VarChar,50)};
  28. //parameters[0].Value = model.Id;
  29. parameters[0].Value = model.DevelopeId;
  30. parameters[1].Value = model.QuantyOriginalData;
  31. parameters[2].Value = model.QuantyWeightData;
  32. parameters[3].Value = model.QualityOriginalData;
  33. parameters[4].Value = model.QualityWeightData;
  34. parameters[5].Value = model.YearTime;
  35. parameters[6].Value = model.Remarks;
  36. //parameters[7].Value = model.Timestamp;
  37. parameters[7].Value = model.other2;
  38. parameters[8].Value = model.other3;
  39. parameters[9].Value = model.other4;
  40. parameters[10].Value = model.other5;
  41. int rows = DbHelperSQL.ExecuteSql(strSql.ToString(), parameters);
  42. if (rows > 0)
  43. {
  44. flag = true;
  45. }
  46. else
  47. {
  48. flag = false;
  49. }
  50. }
  51. return flag;
  52. }</span>

easyui的这个东西挺好用的,其实也不能这么说,还要看他你能不能给我们带来方便,如果不能的话我们也不必去费劲适应easyui,我想说的是其实
这个小东东也挺拧的，有的时候你真的没办法去适应它，比如说大刚做的一个界面如果要使用它我感觉就会更完美，但是由于他那里边的内容不是死的，灵活性很好
所以到目前为止还是没想到办法用上它。这次项目是第一次接触easyui，刚开始真心的觉得它不好，因为做什么事都要去适应它，它对JSON格式也有它自
己的要求，再加上开始的时候对JSON也是一塌糊涂，所以对easyui的第一印象并不好，到后来做了几个窗体我对她的印象完全改变了，能给我们带来很大
的方便，不过事物都有两面性，它也有不好的一面，兼容性不是很好。

时间： 2024-10-21 06:33:47

市委组织部考核项目——利用EasyUi中可编辑的DataGrid控件对多行数据进行编辑并提交的相关文章

UniGui中使用Grid++Report报表控件子报表获取数据的方法

Grid++Report是为优秀的报表控件,子报表是其重要功能之一,但Grid++Report提供的网页报表示范主要是以页面为主的,UniGui在Delphi中以快速编写web管理软件著称,但由于资料文档很少,经过摸索,Grid++Report的子报表要在uniGUi中正确获取子报表数据,只能通过Ajax数据回调的方式进行,在uniGUi中对前端Ajax的响应,就要是通过控件的AjaxEvent事件来处理.报表模板的展示部分的HTML代码要放在UniURLFrame控件的HTML属性中.Ajax

EasyUI 中 DataGrid 控件 列 如何绑定对象中的属性

EasyUI 中 DataGrid 控件 是我们经常用到的控件之一, 但是 DataGrid 控件 在绑定显示列时却不支持对象属性绑定. 模型如下: public class Manager implements java.io.Serializable { private Integer id; private Role role; private String loginName; private String password; private int status; private Da

easyui 中Datagrid 控件在列较多且无数据时，列显示不全的解决方案

在onLoadSuccess 中加入如下代码就OK啦 $('#dg3').datagrid({ onLoadSuccess:function(data){ if(data.total==0){ var dc = $(this).data('datagrid').dc; var header2Row = dc.header2.find('tr.datagrid-header-row'); dc.body2.find('table').append(header2Row.clone().css({"

关于EasyUI中DataGrid控件的一些使用方法总结

一,DataGrid         控件的工作流程 1,通过JavaScript将一个空白的div美化成一个空白的Datagrid模板 2,Datagrid模板通过制定的Url发送请求,获取数据       3,Datagrid通过后台返回的Json将对应的数据按照Filed的名字进行匹配并显示 知道了这个流程那么,那么我们对整个的使用基本上有了百分之80的了解了 在第三步中,Datagrid会向后台发送一个请求,该请求是按照之前创建Datagrid时制定的url来访问的, 并且会自动添加两个

easyUI Datagrid 控件 param参数的用途探索

关于easyUI Datagrid  控件 param参数,官方文本很少解释,主要有如下说明: queryParams object When request remote data, sending additional parameters also. Code example: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } }); 有人认为这个参数可有可无,比如: queryParams这个

easyUI的datagrid控件日期列不能正确显示Json格式数据的解决方案

EasyUI是一套比较轻巧易用的Jquery控件,在使用过程中遇到一个问题,它的列表控件——datagrid, 在显示日期列的时候,由于后台返回给页面的数据是Json格式的,其中的日期字段,在后台是正常的“2012-11-10 12:18:00”这样的格式,json序列化后返回到前台页面就被转换成一个像 /Date(1419264000000)/的格式,导致easyUI无法解析这个字段.经过一番研究,下面给出两种解决方式 希望能帮到大家! 第一种:比较简单 定义函数:function forma

WPF中不规则窗体与WindowsFormsHost控件的兼容问题完美解决方案

首先先得瑟一下,有关WPF中不规则窗体与WindowsFormsHost控件不兼容的问题,网上给出的解决方案不能满足所有的情况,是有特定条件的,比如  WPF中不规则窗体与WebBrowser控件的兼容问题解决办法.该网友的解决办法也是别出心裁的,为什么这样说呢,你下载了他的程序认真读一下就便知道,他的webBrowser控件的是单独放在一个Form中,让这个Form与WPF中的一个Bord控件进行关联,进行同步移动,但是在移动的时候会出现闪烁,并且还会出现运动的白点,用户体验肯定不好. OK,

.net MVC模式下easyui datagrid控件分页

此参照一位仁兄代码,稍作修改 视图代码: <div id="tab" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width:800px;height:400px"> <div title="****" style="padding:0px;"> <div class="

wpf 中DataGrid 控件的样式设置及使用

本次要实现的效果为: 这个DataGrid需要绑定一个集合对象,所以要先定义一个Experience类,包含三个字段 /// <summary> /// 定义工作经历类 /// </summary> public class Experience { /// <summary> /// 获取或设置工作的起始时间 /// </summary> public string Start { get; set; } /// <summary> /// 获