【ITOO技术篇】Easyui datagrid中添加 Combobox

前言：

　　应项目业务要求，需要在easyui封装的datagrid表格中加入combobox下拉框，以便用户给用户选择。而且在用户
选择年限完成之后，根据商品单价和选择数量计算出金钱。乍一看需求清楚；逻辑明了，看起来并没有什么难
得。but......具体细节就让小编带你一起慢慢回味吧。

内容：

  一、效果展示

二、代码展示

我们在JavaScript中写下核心的代码
<span style="font-family:KaiTi_GB2312;color:#333333;"><script type="text/javascript">

$(function () {
//当页面首次刷新的时候执行的事件
initTable();
});

//实现保险信息DataGird控件的绑定操作
function initTable(queryData) {
$('#Insurance').datagrid({ //定位到Table标签，Table标签的ID是test
fitColumns: true,
url: '/FreshQueryInfo/QueryBasicInsurance', //指向后台的Action来获取当前用户的信息的Json格式的数据
title: '添加保险信息', //表格标题
striped: true, //斑马线效果
pagination: true, //分页工具栏
rownumbers: true, //显示行号
onClickCell: onClickCell, //点击单元格触发的事件（重要）
onAfterEdit: onAfterEdit, //编辑单元格之后触发的事件（重要）
queryParams: queryData,
singleSelect: false,//异步查询的参数
columns: [[
{ field: 'ck', checkbox: true, align: 'left', width: 10 },
{ field: 'InsuranceCompany', title: '保险公司', width: 61, align: 'center' },
{ field: 'InsuranceType', title: '保险类型', width: 80 },
{ field: 'Id', title: 'Id', width: 100, hidden: 'true' },
{ field: 'InsuranceCost', title: '保险金额（元/年）', width: 90, align: 'center' },
{
title: '请点击选择年限', field: 'Years', sortable: true,
editor: {
type: 'combobox',
options: {
valueField: 'text',
textField: 'text',
method: 'get',
url: '/FreshQueryInfo/ReturnYears',
required: true,
onSelect: function (rec) {
//alert($(this).parent().parent().parent().parent().parent().parent().parent()[0].cells[4].innerText);
var preNum = $(this).parent().parent().parent().parent().parent().parent().parent()[0].cells[4].innerText; //获得保险金额（元/年）
var result = rec.text * preNum; //计算总计
$(this).parent().parent().parent().parent().parent().parent().parent()[0].cells[6].innerText = result; //给总计赋值（则三步可以不用）

}
}
}
},
{ field: 'Count', title: '总计', width: 140, align: 'center' },
{ field: 'insuranceRemark', title: '保险备注', width: 100, hidden: 'true' },
{ field: 'Comment', title: '备注', width: 100, hidden: 'true' },
]],
});
}
$.extend($.fn.datagrid.methods, {
editCell: function (jq, param) {
return jq.each(function () {
var opts = $(this).datagrid('options');
var fields = $(this).datagrid('getColumnFields', true).concat($(this).datagrid('getColumnFields'));
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor1 = col.editor;
if (fields[i] != param.field) {
col.editor = null;
}
}
$(this).datagrid('beginEdit', param.index);
for (var i = 0; i < fields.length; i++) {
var col = $(this).datagrid('getColumnOption', fields[i]);
col.editor = col.editor1;
}
});
}
});

var editIndex = undefined;
//判断是否编辑结束
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#Insurance').datagrid('validateRow', editIndex)) {
$('#Insurance').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}

//点击单元格触发的事件
function onClickCell(index, field) {

if (endEditing()) {
$('#Insurance').datagrid('selectRow', index)
.datagrid('editCell', { index: index, field: field });
editIndex = index;
}
}

//编辑完单元格之后触发的事件
function onAfterEdit(index, row, changes) {
var insuranceCost = row.InsuranceCost;
var years = row.Years;
var total = insuranceCost * years;
row.Count = total;
$('#Insurance').datagrid('updateRow', { index: $('#Insurance').datagrid('getRowIndex', row), row: { name: 'Count' } });
}
//获取表格中的数据
function GetDate() {
var rows = $('#Insurance').datagrid('getSelected');
//初始化表单数据
var insuranceCompany = rows.InsuranceCompany;
var insuranceType = rows.InsuranceType;
var insuranceCost = rows.InsuranceCost;
var years = rows.Years;
var Count = years * insuranceCost;

$('#Insurance').datagrid.Count('setValue', Count);
alert(rows.Count);
}
//下一步
function NextStep() {
//判断是否有选中行
var row = $('#Insurance').datagrid('getChecked');
if (!row || row.length == 0) {
alert("请先选择您要购买的年限后选中要购买的保险！")
}
else {
var insuranceCompany = row[0].InsuranceCompany;
var insuranceType = row[0].InsuranceType;
var insuranceCost = row[0].InsuranceCost;
var InsuranceRemark = row[0].insuranceRemark;
var Count = row[0].Count;
var Year = row[0].Years;
var Comment = row[0].Comment;
var ID = row[0].Id;

$.ajax({
type: "POST",
url: "/FreshNewReport/AddInsurance",
data: "InsuranceCompany=" + insuranceCompany + "&InsuranceType=" + insuranceType + "&InsuranceCost=" + insuranceCost + "&insuranceRemark=" + InsuranceRemark + "&UseCount=" + Count + "&Comment=" + Comment + "&ID=" + ID,
success: function (data) {
if (data == true) {
window.location.href = "../FreshNewReport/Use"
}
else {
$.messager.alert('提醒', '保险购买失败！请重新购买');
}
},
error: function () {
$.messager.alert('提醒', '保险购买失败，请联系管理员！')
}
});
}
}

function LastStep() {
window.location.href = "../FreshNewReport/StuEducation";
}
</script>
</span>下拉框内容是在controller方法中获取的所以在FreshNewReportController中我们还需要写一个方法
<span style="font-family:KaiTi_GB2312;color:#333333;"> public string ReturnYears()
{
string strJson = "[{\"id\":\"one\",\"text\":\"1\"},{\"id\":\"two\",\"text\":\"2\"},{\"id\":\"three\",\"text\":\"3\"},{\"id\":\"four\",\"text\":\"4\"}]";
return strJson;
}</span>

三、过程回顾

　　在datagrid 中加入combobox，知道了这些代码是如何写的，理解起来还是很简单的，难就难在不知道如何写这
些代码。我们用JavaScript对combobox的状态编写了三个方法，分别是onClickCell（点击编辑）、endEditing（正
在编辑）和onAfterEdit（结束编辑）。刚开始我们无论如何都没有办法在“总计”这一列中讲计算出来并显示到合
适的列，是因为我们没有在onAfterEdit方法中加入事件。现在是当编辑结束之后，我们获取值，计算出总金额，将
表格更新。当学生选择了年限和选中该保险信息的时候，点击下一步，将保险信息存入数据库。

总结：

　　三天，找师哥师姐调这一个错误，过程很让人崩溃。但是庆幸的是我们做出来了。只要功夫深，铁杵磨成针。世
上无难事只怕有心人，就是在说我们这样坚持不懈去解决问题的人。继续加油。奋斗吧~有了这一次的经历，相信以
后的困难都难不倒我们了！