<meta charset="UTF-8">
<title>Row Editing in DataGrid - jQuery EasyUI Demo</title>
<link href="jquery-easyui-1.5/themes/default/easyui.css" rel="stylesheet" />
<link href="jquery-easyui-1.5/themes/icon.css" rel="stylesheet" />
<link href="jquery-easyui-1.5/demo/demo.css" rel="stylesheet" />
<script src="jquery-easyui-1.5/jquery.min.js"></script>
<script src="jquery-easyui-1.5/jquery.easyui.min.js"></script>
<%--<script src="jquery-easyui-1.5/json2.min.js"></script>--%>
</head>
<body>
<h2>Row Editing in DataGrid</h2>
<p>Click the row to start editing.</p>
<div style="margin:20px 0;"></div>
<table id="dg" class="easyui-datagrid" title="Row Editing in DataGrid" style="width:700px;height:auto">
</table>
<div id="tb" style="height:auto">
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" οnclick="append()">Append</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" οnclick="removeit()">Remove</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-save',plain:true" οnclick="accept()">Accept</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-undo',plain:true" οnclick="reject()">Reject</a>
<a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true" οnclick="getChanges()">GetChanges</a>
</div>
<script type="text/javascript">
var editIndex = undefined;
function endEditing() {
if (editIndex == undefined) { return true }
if ($('#dg').datagrid('validateRow', editIndex)) {
$('#dg').datagrid('endEdit', editIndex);
editIndex = undefined;
return true;
} else {
return false;
}
}
function onClickCell(index, field) {
if (editIndex != index) {
if (endEditing()) {
$('#dg').datagrid('selectRow', index)
.datagrid('beginEdit', index);
var ed = $('#dg').datagrid('getEditor', { index: index, field: field });
if (ed) {
($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();
}
editIndex = index;
} else {
setTimeout(function () {
$('#dg').datagrid('selectRow', editIndex);
}, 0);
}
}
}
function onEndEdit(index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'order_no'
});
row.invno = $(ed.target).combobox('getText');
}
function append() {
if (endEditing()) {
$('#dg').datagrid('appendRow', { status: 'P' });
editIndex = $('#dg').datagrid('getRows').length - 1;
$('#dg').datagrid('selectRow', editIndex)
.datagrid('beginEdit', editIndex);
}
}
function removeit() {
if (editIndex == undefined) { return }
$('#dg').datagrid('cancelEdit', editIndex)
.datagrid('deleteRow', editIndex);
editIndex = undefined;
}
//function accept() {
// if (endEditing()) {
// $('#dg').datagrid('acceptChanges');
// }
//}
function accept() {
var test = "test";
var rowsData = $('#dg').datagrid('getRows');
var json = [];
var loc;
$.each(rowsData, function (i) {
loc = {
"invno": rowsData[i].invno,
"order_no": rowsData[i].order_no,
"PI": rowsData[i].PI,
"BRAND": rowsData[i].BRAND,
"num_chu": rowsData[i].num_chu,
"num_moneychu": rowsData[i].num_moneychu,
"goods": rowsData[i].goods
};
json.push(loc);
});
json = JSON.stringify(json); //转换成json数据
alert(json);
$.post('ashx/ajaxdgjsondt.ashx', { "test": test, "jj": json },
function (data) { }, "json");
//$.post('ashx/ajaxdgjsondt.ashx?test=' + test + "&jj=" + escape(json));
//contentType: "application/x-www-form-urlencoded; charset=UTF-8"
$('#dg').datagrid({
//url: 'ashx/ajaxdgjsondt.ashx?test=' + test + "&jj=" + json;
//method: 'get';
//})
}
function reject() {
$('#dg').datagrid('rejectChanges');
editIndex = undefined;
}
function getChanges() {
var rows = $('#dg').datagrid('getChanges');
alert(rows.length + ' rows are changed!');
}
$("#dg").datagrid(
{
iconCls: 'icon-edit',
singleSelect: true,
toolbar: '#tb',
method: 'get',
onClickCell: onClickCell,
onEndEdit: onEndEdit,
columns: [[
//{ field: 'monthend', title: 'monthend', width: '10%',sortable:'true',resizable:'true' },
{ field: 'invno', title: '增值税专用发票号', width: '10%', editor: 'textbox' },
{ field: 'order_no', title: '客户订单号', width: '10%', sortable: 'true', editor: 'textbox' },
{ field: 'PI', title: 'PI', width: '10%', sortable: 'true',editor:'textbox' },
{field: 'BRAND', title: 'BRAND', width: '10%',
editor: {
type: 'combobox',
options: {
data: [{ value: 'IT-5CM', text: 'IT-5CM', 'selected': 'true' }, { value: 'AEO', text: 'aeo' }]
}
//options: {
// valueField: 'BRAND',
// textField: 'BRAND',
// method: 'get',
// url: 'products.json',
// required: true
//}
}
},
{ field: 'num_chu', editor: { type: 'checkbox', options: { on: 'P', off: '' } } },
{ field: 'num_moneychu', title: '出货金额', width: '10%', editor: 'textbox' },
{ field: 'tax', title: '税金', width: '10%', editor: 'textbox' },
{ field: 'goods', title: 'goods', width: '10%', editor: 'textbox' }
]]
})
var flag = "BOOK1.xls";//proType
var factory = "IFHM";
$.getJSON('ashx/Ajaxauto.ashx?action=INV&term=' + factory + '&name=' + flag,
function (data) {
$('#dg').datagrid('loadData', data);
});
</script>
</body>
</html>
2、新建一个ashx/Ajaxauto.ashx ,提取sql数据库中的数据
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Collections;
using System.Web.Services.Protocols;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
public void ProcessRequest(HttpContext context)
{
// 查询的参数名称默认为term
string fac = context.Request.QueryString["term"];
string selectStr = "";
selectStr = @"SELECT FACTORY,CONVERT(varchar(10),monthend,120)as monthend, CONVERT(varchar(10),[Month End],120) as [Month End], CONVERT(varchar(10),invdate,120) as invdate, invno, INVexcel.order_no, pihead_dm.pi_no as PI,pihead_dm.band as BRAND, goods, producttype, num_chu, num_moneychu, tax,notaxmoney, USDmoney, taxmoney, filename, update_by, update_date FROM INVexcel left outer join pihead_dm on INVexcel.order_no=pihead_dm.pi_no Where filename = '" + fname + "'";
context.Response.ContentType = "text/plain";
string key = selectStr.ToString().Trim();
Autojquery exsql = new Autojquery();
List<JqueryUIinv> Autolist = new List<JqueryUIinv>();
Autolist = exsql.GetJquerylistinv(key);
System.Web.Script.Serialization.JavaScriptSerializer js = new System.Web.Script.Serialization.JavaScriptSerializer();
string s = js.Serialize(Autolist);
context.Response.Write(js.Serialize(Autolist));
public bool IsReusable {
get {
return false;
}
}
3、新建一个Autojquery.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Collections;
using System.Web.Services.Protocols;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
/// <summary>
///Autojquery 的摘要说明
/// </summary>
public class Autojquery
{
public List<JqueryUIinv> GetJquerylistinv(string selkey)
{
//string sql = "select * from puller where ddacode like N'%" + selkey + "%'";
string sql = selkey;
List<JqueryUIinv> modellist = new List<JqueryUIinv>();
DataTable dt = SqlHelper.GetTable(sql);
if (dt.Rows.Count > 0)
{
for (int i = 0; i < dt.Rows.Count; i++)
{
JqueryUIinv model = new JqueryUIinv();
LoadEntityDataDetailinv(dt.Rows[i], model);
modellist.Add(model);
}
}
return modellist;
}
private void LoadEntityDataDetailinv(DataRow dr, JqueryUIinv model)
{
model.monthend = dr["monthend"].ToString();
model.invdate = dr["invdate"].ToString();
model.invno = dr["invno"].ToString();
model.order_no = dr["order_no"].ToString();
model.PI = dr["PI"].ToString();
model.BRAND = dr["BRAND"].ToString();
model.goods = dr["goods"].ToString();
model.num_chu = dr["num_chu"].ToString();
model.num_moneychu = dr["num_moneychu"].ToString();
model.tax = dr["tax"].ToString();
model.notaxmoney = dr["notaxmoney"].ToString();
model.USDmoney = dr["USDmoney"].ToString();
model.taxmoney = dr["taxmoney"].ToString();
}
}
4、新建一个JqueryUI.cs //定义所需字段
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
public class JqueryUIinv
{
public string monthend { set; get; }
public string invdate { set; get; }
public string invno { set; get; }
public string order_no { set; get; }
public string PI { set; get; }
public string BRAND { set; get; }
public string goods { set; get; }
public string num_chu { set; get; }
public string num_moneychu { set; get; }
public string tax { set; get; }
public string notaxmoney { set; get; }
public string USDmoney { set; get; }
public string taxmoney { set; get; }
}
5、定于一个SqlHelper.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System .Configuration ;
using System .Data ;
using System .Data .SqlClient ;
public class SqlHelper
{
static string connStr = ConfigurationManager.ConnectionStrings["speedsqlConnectionString"].ToString();
#region 执行查询语句,返回数据表 DataTable GetTable(string sqlStr, params SqlParameter[] paras)
/// <summary>
/// 执行查询语句,返回数据表
/// </summary>
/// <param name="sqlStr"></param>
/// <param name="paras"></param>
/// <returns></returns>
static public DataTable GetTable(string sqlStr, params SqlParameter[] paras)
{
DataTable dt=new DataTable ();
using (SqlConnection conn=new SqlConnection (connStr ))
{
SqlDataAdapter da = new SqlDataAdapter(sqlStr, conn);
da.SelectCommand.Parameters.AddRange(paras);
da.Fill(dt);
}
return dt;
}
#endregion
#region string ExecuteScalar(string sql, params SqlParameter[] paras)
/// <summary>
///
/// </summary>
/// <param name="sql"></param>
/// <param name="paras"></param>
/// <returns></returns>
static public object ExecuteScalar(string sql, params SqlParameter[] paras)
{
using (SqlConnection conn=new SqlConnection (connStr ))
{
using (SqlCommand cmd=new SqlCommand (sql,conn))
{
cmd.Parameters.AddRange(paras);
conn.Open();
return cmd.ExecuteScalar();
}
}
}
#endregion
#region 执行增删改返回受影响行数 int ExecNonQuery(string sql, params SqlParameter[] paras)
/// <summary>
/// 执行增删改返回受影响行数
/// </summary>
/// <param name="sql"></param>
/// <param name="paras"></param>
/// <returns></returns>
static public int ExecNonQuery(string sql, params SqlParameter[] paras)
{
using (SqlConnection conn=new SqlConnection (connStr ))
{
using (SqlCommand cmd = new SqlCommand(sql, conn))
{
conn.Open();
cmd.Parameters.AddRange(paras);
return cmd.ExecuteNonQuery();
}
}
}
#endregion
#region 事务执行增删改,同时对三张表(明细,工资)进行操作string ExecNonQueryTree(List <string >sqllist,List <SqlParameter []>paraslist)
/// <summary>
/// 事务执行增删改,同时对三张表(明细,工资)进行操作
/// </summary>
/// <param name="sql"></param>
/// <param name="paras"></param>
/// <returns></returns>
static public string ExecNonQueryTranTree(List<string> sqllist, List<SqlParameter[]> paraslist,int count)
{
using (SqlConnection conn = new SqlConnection(connStr))
{
conn.Open();
SqlTransaction st = conn.BeginTransaction();
try
{
SqlCommand cmd = new SqlCommand();
if (sqllist.Count == 3)//增加
{
cmd.CommandText = sqllist[0];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.AddRange(paraslist[0]);
//cmd.ExecuteNonQuery();
cmd.Transaction = st;
cmd.ExecuteNonQuery();
}
else//修改
{
cmd.CommandText = sqllist[0];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.AddRange(paraslist[0]);
//cmd.ExecuteNonQuery();
cmd.Transaction = st;
cmd.ExecuteNonQuery();
cmd.CommandText = sqllist[3];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
//cmd.ExecuteNonQuery();
cmd.Transaction = st;
cmd.ExecuteNonQuery();
cmd.CommandText = sqllist[4];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Transaction = st;
cmd.ExecuteNonQuery();
}
if (paraslist.Count > 1)
{
for (int i = 1; i <= count ; i++)
{
cmd.CommandText = sqllist[1];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.Clear();
cmd.Parameters.AddRange(paraslist[i]);
cmd.Transaction = st;
cmd.ExecuteNonQuery();
}
for (int i = count+1 ; i < paraslist .Count ; i++)
{
cmd.CommandText = sqllist[2];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.Clear();
cmd.Parameters.AddRange(paraslist[i]);
cmd.Transaction = st;
cmd.ExecuteNonQuery ();
}
}
//提交事务
st.Commit();
return "操作成功";
}
catch (SqlException ee)
{
//回滚事务
st.Rollback();
throw ee;
}
}
}
#endregion
#region 事务执行增删改,同时对两张表(明细)进行操作string ExecNonQuery(List <string >sqllist,List <SqlParameter []>paraslist)
/// <summary>
/// 事务执行增删改,同时对两张表(明细)进行操作
/// </summary>
/// <param name="sql"></param>
/// <param name="paras"></param>
/// <returns></returns>
static public string ExecNonQueryTran(List<string> sqllist, List<SqlParameter[]> paraslist)
{
using (SqlConnection conn = new SqlConnection(connStr))
{
conn.Open();
SqlTransaction st = conn.BeginTransaction();
try
{
SqlCommand cmd = new SqlCommand();
if (sqllist.Count == 2)
{
cmd.CommandText = sqllist[0];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.AddRange(paraslist[0]);
//cmd.ExecuteNonQuery();
cmd.Transaction = st;
cmd.ExecuteNonQuery();
}
else
{
cmd.CommandText = sqllist[0];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.AddRange(paraslist[0]);
//cmd.ExecuteNonQuery();
cmd.Transaction = st;
cmd.ExecuteNonQuery();
cmd.CommandText = sqllist[2];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
//cmd.ExecuteNonQuery();
cmd.Transaction = st;
cmd.ExecuteNonQuery();
}
if (paraslist.Count > 1)
{
for (int i = 1; i < paraslist.Count; i++)
{
cmd.CommandText = sqllist[1];
cmd.CommandType = CommandType.Text;
cmd.Connection = conn;
cmd.Parameters.Clear();
cmd.Parameters.AddRange(paraslist[i]);
cmd.Transaction = st;
cmd.ExecuteNonQuery();
}
}
//提交事务
st.Commit();
return "操作成功";
}
catch (SqlException ee)
{
//回滚事务
st.Rollback();
throw ee;
}
}
}
#endregion
#region
/// <summary>
/// 执行存储过程,返回dataset
/// </summary>
/// <param name="pro"></param>
/// <param name="pars"></param>
/// <returns></returns>
static public DataSet ExecProDaSet(string pro, params SqlParameter []pars)
{
using(SqlConnection conn=new SqlConnection (connStr ))
{
SqlCommand cmd = new SqlCommand(pro ,conn);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddRange (pars );
//cmd.Parameters[ "@p1 "].Value = " "
//传递存储程参数
SqlDataAdapter pt = new SqlDataAdapter(cmd);
DataSet ds = new DataSet(); //前面添加的强类型数据集
pt.Fill(ds);
return ds;
}
}
#endregion
static public DataTable ExecProc(string sql, params SqlParameter[] pars)
{
using (SqlConnection conn=new SqlConnection (connStr ))
{
using (SqlCommand cmd=new SqlCommand (sql ,conn))
{
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddRange(pars);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
6、定于ajaxdgjsondt.ashx //把页面datagrid中的JSON数据转换成dataTable
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Data;
using System.Collections;
using System.Web.Services.Protocols;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Runtime.Serialization.Json;
using System.Runtime.Serialization;
using System.Web.Script.Serialization;
public class ajaxdgjsondt : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
context.Response.ContentEncoding = Encoding.UTF8;
string text = context.Request.QueryString["test"];//前台传的标示值
string listStr = context.Server.UrlDecode(context.Request["jj"]);
string josnArray = context.Request.Params["jj"];//获取传递过来的json数据
context.Request.ContentEncoding = System.Text.Encoding.UTF8;
System.Web.Script.Serialization.JavaScriptSerializer jsonSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//把json
List<JqueryUIinv> questionList = jsonSerializer.Deserialize<List<JqueryUIinv>>(listStr);//注意这里必须为List<Student>类型,因为客户端提交的是一个数组json
string aaaaaa = questionList.Count.ToString();
foreach (JqueryUIinv UIinv in questionList)
{
string invno = UIinv.invno;
string goods = UIinv.goods;
}
string aa = josnArray;
//DataSet ds = JsonToDataSet(josnArray);
//DataTable dt = JsonConvert.DeserializeObject<DataTable>(josnArray);//把json数据转换为DataTable ds.Tables[0]
DataTable dt = ToDataTable(listStr);
for (int i = 0; i < dt.Rows.Count; i++)
{
string aaa = dt.Rows[i][0].ToString().Trim();
string bb = dt.Rows[i][1].ToString().Trim();
string dd = dt.Rows[i]["goods"].ToString().Trim();
string cc = i.ToString();
}
}
public bool IsReusable {
get {
return false;
}
}
public static DataSet JsonToDataSet(string Json)
{
try
{
DataSet ds = new DataSet();
JavaScriptSerializer JSS = new JavaScriptSerializer();
object obj = JSS.DeserializeObject(Json);
Dictionary<string, object> datajson = (Dictionary<string, object>)obj;
foreach (var item in datajson)
{
DataTable dt = new DataTable(item.Key);
object[] rows = (object[])item.Value;
foreach (var row in rows)
{
Dictionary<string, object> val = (Dictionary<string, object>)row;
DataRow dr = dt.NewRow();
foreach (KeyValuePair<string, object> sss in val)
{
if (!dt.Columns.Contains(sss.Key))
{
dt.Columns.Add(sss.Key.ToString());
dr[sss.Key] = sss.Value;
}
else
dr[sss.Key] = sss.Value;
}
dt.Rows.Add(dr);
}
ds.Tables.Add(dt);
}
return ds;
}
catch
{
return null;
}
}
public static DataTable ToDataTable(string json)
{
try
{
DataTable dataTable = new DataTable(); //实例化
DataTable result;
System.Web.Script.Serialization.JavaScriptSerializer javaScriptSerializer = new System.Web.Script.Serialization.JavaScriptSerializer();
javaScriptSerializer.MaxJsonLength = Int32.MaxValue; //取得最大数值
ArrayList arrayList = javaScriptSerializer.Deserialize<ArrayList>(json);
if (arrayList.Count > 0)
{
foreach (Dictionary<string, object> dictionary in arrayList)
{
if (dictionary.Keys.Count<string>() == 0)
{
result = dataTable;
return result;
}
if (dataTable.Columns.Count == 0)
{
foreach (string current in dictionary.Keys)
{
dataTable.Columns.Add(current, dictionary[current].GetType());
}
}
DataRow dataRow = dataTable.NewRow();
foreach (string current in dictionary.Keys)
{
dataRow[current] = dictionary[current];
}
dataTable.Rows.Add(dataRow); //循环添加行到DataTable中
}
}
return dataTable;
}
catch
{
return null;
}
}
}