您的位置：首页 > Web前端 > JQuery

Jquery easyui从零单排之datagrid整表编辑保存到数据库

2016-02-29 10:09 651 查看
最近一直在利用空余时间，对Jquery EasyUI进行学习。前几篇都是在讲datagrid，今天这篇还是讲它的，是对datagrid进行编辑，然后把新数据全部保存到数据库的问题。

这个地方还是花了好长的时间，主要是在前台把循环读取datagrid的数据转换为json数据，以及json传递问题。

先在前台添加datagrid，这个在这里就不用再复述了。
<head>
<title>Start from zero</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.4.1/demo/demo.css">
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
</head>
<body>
<form id="fm">
<div id="tb">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true"
onclick="accept()">保存</a>
<input type="hidden" id="text" />
</div>
<table id="dg" title="Client Side Pagination" toolbar="#tb" fitcolumns="true" rownumbers="true"
showfooter="true" style="width: 640px; height: 600px" data-options="
remoteSort:false,
rownumbers:true,
singleSelect:true,
autoRowHeight:true,
pagination:true,
showFooter: true,
fitColumns: true,
pageSize:20,
onClickRow: onClickRow">
<thead frozen="true">
<tr>
<th data-options="field:'ck',checkbox:true,width:40">
</th>
<th data-options="field:'LoginID',width:100" sortable="true">
LoginID
</th>
</tr>
</thead>
<thead>
<tr>
<th data-options="field:'UserName',width:120,editor:'textbox'" sortable="true">
UserName
</th>
<th data-options="field:'Sex',align:'center',width:80,editor:'textbox'" sortable="true">
Sex
</th>
<th data-options="field:'Department',width:140,editor:'textbox'" sortable="true">
Department
</th>
<th data-options="field:'Age',width:80,editor:'textbox'" sortable="true">
Age
</th>
</tr>
</thead>
</table>
<script type="text/javascript">
function getData()
{
var lastIndex;
$('#dg').datagrid({
url: 'Handler2.ashx',
method: 'get',
striped: true,
title: "员工列表"
})
}
function onClickRow(index)
{
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
editIndex = index;
} else {
$('#dg').datagrid('selectRow', editIndex);
}
}
}
function accept()
{
var test="test";
var rowsData = $('#dg').datagrid('getRows');
var json = [];
var loc;
$.each(rowsData, function (i)
{
loc = {
"ID":rowsData[i].ID,
"LoginID": rowsData[i].LoginID,
"UserName": rowsData[i].UserName,
"Sex": rowsData[i].Sex,
"Department": rowsData[i].Department,
"Age": rowsData[i].Age
};
json.push(loc);
});
json = JSON.stringify(json); //转换成json数据
//alert(json);
$('#dg').datagrid({
url: 'Handler2.ashx?test=' + test+ "&jj=" + json,
method: 'get'
})
}
var editIndex = undefined;
function endEditing()
{
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
var ID = $('#dg').datagrid('getEditor', { index: editIndex, field: 'ID' });
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
$(function ()
{
getData();
});
</script>
<input name="Test" id="test" type="hidden" />
</form>
</body>
</html>



对于datagrid的可编辑，主要是在它的行单击事件中实现的，上面代码中的onClickRow(index)，这个可以去详细查看官网的实例。

保存事件accept（）函数才是关键，既然要重新保存数据，就要先获取整个datagrid的数据$('#dg').datagrid('getRows')，然后你要想啊，怎么才能把这些数据传递到一般处理程序那里呢，我自己原本是想把这些数据弄成一个数组传过去，可是搞了半天没成功，后面就换了思路，试试json传递，没想还成功了。
var rowsData = $('#dg').datagrid('getRows');
var json = [];
var loc;
$.each(rowsData, function (i)
{
loc = {
"ID":rowsData[i].ID,
"LoginID": rowsData[i].LoginID,
"UserName": rowsData[i].UserName,
"Sex": rowsData[i].Sex,
"Department": rowsData[i].Department,
"Age": rowsData[i].Age
};
json.push(loc);
});
json = JSON.stringify(json); //转换成json数据
至于传递这里我写得有点丑，或者是丑到爆了，有会的兄弟朋友请多多指教，代码如下：
$('#dg').datagrid({
url: 'Handler2.ashx?test=' + test+ "&jj=" + json,
method: 'get'
})


然后一般处理程序，主要是就是接收json数据，然后转换json数据，用sql语句保存至数据库。
public class Handler2 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string text = context.Request.QueryString["test"];//前台传的标示值

if (string.IsNullOrEmpty(text))//当为空时，表示直接绑定datagrid
{
SqlHelp sqla = new SqlHelp();
string stra = "select top 5 * from tTestTable";

DataTable dta = sqla.GetDataTable(stra);
sqla.SqlClose();

string json = JsonConvert.SerializeObject(dta);

context.Response.Write(json);
}
else if (text == "test")//保存数据
{
string josnArray = context.Request.Params["jj"].ToString();//获取传递过来的json数据
DataTable dt = JsonConvert.DeserializeObject<DataTable>(josnArray);//把json数据转换为DataTable
   foreach (DataRow dr in dt.Rows)
            {
                SqlHelp sqla = new SqlHelp();
                string stra = "update tTestTable set UserName='" + dr["UserName"].ToString() + "' where ID='" + dr["ID"].ToString() + "'";
                bool aa = sqla.ExecuteNonQuery(stra);
                sqla.SqlClose();
            }
}

}
public bool IsReusable
{
get
{
return false;
}
}

}


搞了这么久，功能是实现了，但是远远算不上成功，为什么呢，因为我发现了一个bug，在其他浏览器下操作都是没有问题，但是在IE下操作之后，存到数据库里该字段下的汉字都变成了问号“？”，如下图
数据表截图：



页面显示截图：



这种情况只存在于用IE浏览器操作（IE浏览器下操作，编辑汉字就会保存为这种问号“？”，数字和字母不会），用其他浏览器都正常，找了好久的问题，感觉不是数据库的问题，应该是IE的问题，原本觉得是编码的问题，我尝试了也没啥反应，所在在这里提出来，希望大家探讨下，也请教下会的朋友，谢谢。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航