引言
最近项目中遇到了这么一个需求，在datagrid中显示的数据需要动态的加载，也就是说表格中显示的列是不固定的，显示的列的名称和列的数量都是不固定的，这些数据都是需要我们从后台拿来数据然后在动态的绑定到表格中。这种需求就需要我们将datagrid做活，下面就给大家分享一下我的想法。
之前我们的viewmodel都是和我们的数据库中的表差不多，也是这个元婴导致我在前期思考这个需求的时候花费了一定的时间，后来查询了一些资料改变了这种想法，我将datagrid的属性封装了一个viewmodel；
namespace LFBidSystem.ViewModel { [DataContract] public class TableHeaderViewModel { /*表头描述 * 1.FieldValue:键值 * 2.FieldText:显示名称 * 3.Hidden：是否隐藏 * 4.Editor：启用编辑 */ [DataMember] public string FieldValue; [DataMember] public string FieldText; [DataMember] public bool Hidden; [DataMember] public string Editor; } }
动态加载表头信息：
<pre name="code" class="csharp">public ActionResult ShowBidProperties() { //定义一个变量来接收js传递的标号 string bidProjectId; //表头实体集合 List<TableHeaderViewModel> listHeaderVM = new List<TableHeaderViewModel>(); //隐藏的表头列“评分项得分编号” TableHeaderViewModel judgeHeader1Hide = new TableHeaderViewModel { FieldValue = "BidUserId", FieldText = "投标商Id", Hidden = true }; listHeaderVM.Add(judgeHeader1Hide); //隐藏的表头列“评分项得分编号” //TableHeaderViewModel judgeHeader2Hide = new TableHeaderViewModel //{ // FieldValue = "ItemScoreId", // FieldText = "专家评分Id", // Hidden = true //}; //listHeaderVM.Add(judgeHeader2Hide); //第一列“公司名称” TableHeaderViewModel judgeHeaderFirst = new TableHeaderViewModel { FieldValue = "BidUserName", FieldText = "招标商", Hidden = false }; listHeaderVM.Add(judgeHeaderFirst); //第一列“公司名称” TableHeaderViewModel judgeHeaderSecond = new TableHeaderViewModel { FieldValue = "QutoScore", FieldText = "报价得分", Hidden = false }; listHeaderVM.Add(judgeHeaderSecond); //第二列及倒数第二列之前，各评分项遍历 //获取页面上的招标编号,并转化成Guid格式的数据类型 //string bidRecordId = Request.Params["BidRecordId"]; bidProjectId = Request.Params["BidProjectId"]; //Guid recordId = new Guid(bidRecordId); //根据招标编号，获取所对应的所有评分项信息，评分名称作为表头 List<BidJudgeViewModel> listBidJudge = iBidJudgeService.GetBidJudge(bidProjectId); //去除报价得分选项 for (int i = 0; i < listBidJudge.Count; i++) { if (listBidJudge[i].JudgeItemName == "报价得分") { listBidJudge.Remove(listBidJudge[i]); } } foreach (var item in listBidJudge) { TableHeaderViewModel JudgeHeader = new TableHeaderViewModel(); JudgeHeader.FieldValue = item.JudgeId.ToString(); JudgeHeader.FieldText = item.JudgeItemName; JudgeHeader.Hidden = false; JudgeHeader.Editor = "text"; listHeaderVM.Add(JudgeHeader); } //最后一列“总分” TableHeaderViewModel judgeHeaderLast = new TableHeaderViewModel { FieldValue = "Score", FieldText = "总分", Editor = "text", Hidden = false }; listHeaderVM.Add(judgeHeaderLast); //将封装的表头信息返回给前台 return Json(listHeaderVM, JsonRequestBehavior.AllowGet); }
js中将表头信息绑定到datagrid中：
//加载表头数据 function load_data() {本地数据 var bidProjectId = document.getElementById('BidProjectId').value; $.post('/BiddingResult/ShowBidProperties?BidProjectId=' + bidProjectId, function (jsonObj) { columnsAll = new Array(); //如果返回的数据不为空,则添加遍历该数据集合 if (jsonObj.length > 0) { for (var i = 0; i < jsonObj.length; i++) { //把返回的数据封装到一个对象中 var col = {} col['title'] = jsonObj[i].FieldText; col['field'] = jsonObj[i].FieldValue; col['editor'] = jsonObj[i].Editor; //TODO，启用编辑不能用 col['width'] = 100; col['align'] = 'center' col['hidden'] = jsonObj[i].Hidden; //把这个对象添加到列集合中 columnsAll.push(col); } //重新加载表格 $('#dg').datagrid({ height: 500, singleSelect: true, url: '', //editor: 'text', fit: true, singleSelect: true, toolbar: '#tb', method: 'get', columns: [columnsAll], //onClickRow: onClickRow, //单击事件 }).datagrid('loadData', { total: 0, rows: [] }); //('reload'); } else { $.messager.alert('提示信息', '没有可用数据，请联系管理员！', 'warning'); } }, 'JSON'); }
我们在controller中返回多个list，实现数据的对应：
var data = new { CompanyName = companyNameList, //投标商的数量 ScoreAvg = finalScoreAll, //每一个专家对某个投标商的评分 BidJudgeInfo = listBidJudge, QutoScore = qutoScore };
动态给datagrid绑定数据
$.ajax({ url: '/BiddingResult/QueryAllResult', data: { "BidProjectId": bidProjectId }, success: function (data) { var array = new Array(); for (var i = 0; i < data.CompanyName.length; i++) { //赋值投标商信息 var obj = new Object(); obj.BidUserName = data.CompanyName[i]; //赋值报价得分 obj.QutoScore = data.QutoScore[i].toFixed(2); var scoreAll = 0; for (var j = 0; j < data.BidJudgeInfo.length; j++) { //循环将各个评分项赋值到各个列中 obj[data.BidJudgeInfo[j].JudgeId.toLowerCase()] = data.ScoreAvg[i][j].toFixed(2); //循环计算各个评分项的和 scoreAll = Number(scoreAll.toFixed(2)) + Number(data.ScoreAvg[i][j].toFixed(2)); } obj.Score = (Number(data.QutoScore[i]) + Number(scoreAll)).toFixed(2); array.push(obj); } $('#dg').datagrid('loadData', array); //确定中标者是谁 var Rows = $("#dg").datagrid("getRows"); var max = Rows[0]; for (var i = 1; i < Rows.length; i++) { //alert(data.length) if (max.Score < Rows[i].Score) { max = Rows[i]; } } //alert(max.CompanyName) document.getElementById("win").value = max.BidUserName } })
小结
当我们在实现某些功能受阻的时候，我们需要改变一种想法或者换一种思路来解决，这样我们就可能会有意想不到的收获，不能被原有的思想束缚，其实我们jQuery已经给我们封装了很多很好的东西，只是我们不会用而已，也就是说我们对这个东西不是很熟悉，当
我们知道的东西越多的时候实现需求的思路就越多。加油吧！！！
