对webdatagrid只取有更改的行
在实际工作中，我们也许会对绑定的datagrid进行编辑，有的情况下，我们只需要得到有变更的行，在后台取不仅效率不高且不方便，所以我在前台来进行操作。
具体的步骤为：
1. 在单元格编辑后执行Editing_CellValueChanged事件，记录变更的行号。
2. 模板列（TemplateDataField）中的控件发生改变是不会触发CellValueChanged事件的，所以需要为控件单独封装一个方法来记录行号。
3. 我们需要一个原始的模板数据来比较当前的编辑是否为真的修改，比如说将Ａ改Ｂ 再将Ｂ改为Ａ 实质上是没有修改的。 前台的模板数据我采用json。
这样的话有利于功能的整体封装，如果没有模板列的情况下，我们只要在需要得到变更行的时候调用方法就可以了，
如果有模板也只需要在模板列中的控件上加一个点击事件，调用getRowIndex方法即可。
具体代码如相下
<script type="text/javascript" id="igClientScript">
//初使化一个空的json数组
var jsonTable=new Array;
//普通单元格修改
function WebDataGrid2_Editing_CellValueChanged(sender, eventArgs) {
var rowindex = eventArgs.get_cell().get_row().get_index(); //当前行号
var columnIndex = eventArgs.get_cell().get_index(); //当前列号
var columnKey = eventArgs.get_cell().get_column().get_key();//当前列的key
var currentValue = eventArgs.get_cell().get_value(); //修改后的值
//添加一个新的json对象到json数组
var newjson = { "rowIndex": rowindex, "columnIndex": columnIndex, "columnKey": columnKey, "currentValue": currentValue };
jsonTable.push(newjson);
}
//模块列控件单击 适用于select, checkbox,button
function getRowIndex(obj) {
var rowindex = $(obj).parents("tr").eq(0).index(); //编辑对象所在的tr在表格中的行号
var columnIndex = $(obj).parent().index(); //当前对象的td所在的列
var columnKey = $find("WebDataGrid2").get_columns().get_column(columnIndex).get_key(); //当前编辑列的key
var currentValue = "";
switch (obj.type) {
case "checkbox":
//如果类型为复选框就取true或false
currentValue = obj.checked ? "true" : "false";
break;
default:
//非复选框的情况下取val值
currentValue = $(obj).val();
break;
}
//添加一个新的json对象到json数组
var newjson = { "rowIndex": rowindex, "columnIndex": columnIndex, "columnKey": columnKey, "currentValue": currentValue };
jsonTable.push(newjson);
}
//将下拉框的改变适用于第三方控件
function WebDropDown1_ValueChanged(sender, eventArgs) {
var rowindex = $("#" + sender._id).parents("tr").eq(0).index(); //编辑对象所在的tr在表格中的行号
var columnIndex = $("#" + sender._id).parent().index(); //当前对象的td所在的列
var columnKey = $find("WebDataGrid2").get_columns().get_column(columnIndex).get_key(); //当前编辑列的key
var currentValue = eventArgs.getNewValue(); //所择后的值
//添加一个新的json对象到json数组
var newjson = { "rowIndex": rowindex, "columnIndex": columnIndex, "columnKey": columnKey, "currentValue": currentValue };
jsonTable.push(newjson);
}
//保存时对比
function saveClient() {
var jsonstr = $("#hidserlier").val(); //原使数据序列化字符串
var jsonobj = eval(jsonstr); //将原使数据序列化字符串将换成json对象
var modifyRow = new Array; //记录已修改的行和列的值格式为（行号，列号）
var j = 0;
for (var i = 0; i < jsonTable.length; i++) {
if (jsonTable[i].rowIndex != -1) {
for (var key in jsonobj[jsonTable[i].rowIndex]) {
if (jsonTable[i].columnKey == key) {
//判断已记录的行和原使json数据是否为同一行
if (jsonTable[i].currentValue != jsonobj[jsonTable[i].rowIndex][key]) {
//如果数据有更改则添加到modifyRow数组，但同一个行和列只存一个
var arrindex = ForArr(modifyRow, jsonTable[i].rowIndex + "," + jsonTable[i].columnIndex);
if (arrindex ==-1 ) {
modifyRow[j] = jsonTable[i].rowIndex + ","+jsonTable[i].columnIndex;
j++;
}
}
else {
//如果是改回的操作则删除已经的值
var arrindex = ForArr(modifyRow, jsonTable[i].rowIndex + "," + jsonTable[i].columnIndex);
if (arrindex != -1) {
modifyRow.splice(arrindex, 1);
}
}
break;
}
}
}
}
var changeRow = "";
for (var k = 0; k < modifyRow.length; k++) {
if (modifyRow[k] != null && modifyRow[k] != "undefined") {
//只取到修改过的行号
var temparr = modifyRow[k].split(',');
changeRow += temparr[0] + ",";
}
}
alert(changeRow);
}
//循环数组寻找行和列的值
function ForArr(modifyRow,value) {
for (var i = 0; i < modifyRow.length; i++) {
if (modifyRow[i] == value) {
return i;
}
}
return -1;
}
</script>
<ig:WebDataGrid ID="WebDataGrid2" runat="server" Height="350px" Width="604px" AutoGenerateColumns="False"
BorderStyle="Solid" OnInitializeRow="WebDataGrid1_InitializeRow">
<Columns>
<ig:UnboundField Key="a">
<Header Text="手动输入a" />
</ig:UnboundField>
<ig:TemplateDataField Key="b2">
<Header Text="服务复选框" />
<ItemTemplate>
<asp:CheckBox runat="server" ID="chkserver" />
</ItemTemplate>
</ig:TemplateDataField>
<ig:TemplateDataField Key="b">
<Header Text="客户复选框" />
<ItemTemplate>
<input type="checkbox" id="chkclient" runat="server" clientidmode="Static" onclick="getRowIndex(this);" />
</ItemTemplate>
</ig:TemplateDataField>
<ig:TemplateDataField Key="c" Width="100px">
<Header Text="选择框" />
<ItemTemplate>
<ig:WebDropDown ID="WebDropDown1" runat="server" Width="100px">
<Items>
<ig:DropDownItem Text="c1" Value="c1">
</ig:DropDownItem>
<ig:DropDownItem Text="c2" Value="c2">
</ig:DropDownItem>
<ig:DropDownItem Text="c3" Value="c3">
</ig:DropDownItem>
<ig:DropDownItem Text="c4" Value="c4">
</ig:DropDownItem>
<ig:DropDownItem Text="c5" Value="c5">
</ig:DropDownItem>
</Items>
<ClientEvents ValueChanged="WebDropDown1_ValueChanged" />
</ig:WebDropDown>
</ItemTemplate>
</ig:TemplateDataField>
<ig:UnboundField Key="d">
<Header Text="手动输入d" />
</ig:UnboundField>
<ig:UnboundField Key="e">
<Header Text="手动输入e" />
</ig:UnboundField>
<ig:BoundDataField Key="a1" DataFieldName="a" Hidden="true">
<Header Text="a" />
</ig:BoundDataField>
<ig:BoundDataField Key="b1" DataFieldName="b" Hidden="true">
<Header Text="b" />
</ig:BoundDataField>
<ig:BoundDataField Key="c1" DataFieldName="c" Hidden="true">
<Header Text="c" />
</ig:BoundDataField>
<ig:BoundDataField Key="d1" DataFieldName="d" Hidden="true">
<Header Text="d" />
</ig:BoundDataField>
<ig:BoundDataField Key="e1" DataFieldName="e" Hidden="true">
<Header Text="e" />
</ig:BoundDataField>
</Columns>
<Behaviors>
<ig:ColumnMoving>
</ig:ColumnMoving>
<ig:EditingCore>
<Behaviors>
<ig:CellEditing>
</ig:CellEditing>
</Behaviors>
<EditingClientEvents CellValueChanged="WebDataGrid2_Editing_CellValueChanged" />
</ig:EditingCore>
</Behaviors>
</ig:WebDataGrid>
<input type="button" value="比对" onclick="saveClient()" />
<input type="hidden" id="hidserlier" runat="server" />
