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

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

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

查询出的结果图

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

控件的使用

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:

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值去一般处理程序中找对应的方法

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>

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层:

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层:

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的第一印象并不好，到后来做了几个窗体我对她的印象完全改变了，能给我们带来很大
的方便，不过事物都有两面性，它也有不好的一面，兼容性不是很好。