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

最近一直在利用空余时间,对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"
            οnclick="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的问题,原本觉得是编码的问题,我尝试了也没啥反应,所在在这里提出来,希望大家探讨下,也请教下会的朋友,谢谢。

发布了61 篇原创文章 · 获赞 9 · 访问量 20万+
展开阅读全文

easyui datagrid 编辑行后如何保存

09-07

<script type="text/javascript"> $(function () { var datagrid; //定义全局变量datagrid var editRow = undefined; //定义全局变量:当前编辑的行 datagrid = $("#dd").datagrid({ url: 'UserCenter.aspx', //请求的数据源 iconCls: 'icon-save', //图标 pagination: true, //显示分页 pageSize: 15, //页大小 pageList: [15, 30, 45, 60], //页大小下拉选项此项各value是pageSize的倍数 fit: true, //datagrid自适应宽度 fitColumn: false, //列自适应宽度 striped: true, //行背景交换 nowap: true, //列内容多时自动折至第二行 border: false, idField: 'ID', //主键 columns: [[//显示的列 {field: 'ID', title: '编号', width: 100, sortable: true, checkbox: true }, { field: 'UserName', title: '用户名', width: 100, sortable: true, editor: { type: 'validatebox', options: { required: true} } }, { field: 'RealName', title: '性别', width: 100, editor: { type: 'combobox', options: { data: [{ id: 0, text: '请选择' }, { id: 1, text: '男' }, { id: 2, text: '女' }], valueField: 'id', textField: 'text', } } }, { field: 'Email', title: '邮箱', width: 100, editor: { type: 'validatebox', options: { required: true} } } ]], queryParams: { action: 'query' }, //查询参数 toolbar: [{ text: '添加', iconCls: 'icon-add', handler: function () {//添加列表的操作按钮添加,修改,删除等 //添加时先判断是否有开启编辑的行,如果有则把开户编辑的那行结束编辑 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //添加时如果没有正在编辑的行,则在datagrid的第一行插入一行 if (editRow == undefined) { datagrid.datagrid("insertRow", { index: 0, // index start with 0 row: { } }); //将新插入的那一行开户编辑状态 datagrid.datagrid("beginEdit", 0); //给当前编辑的行赋值 editRow = 0; } } }, '-', { text: '删除', iconCls: 'icon-remove', handler: function () { //删除时先获取选择行 var rows = datagrid.datagrid("getSelections"); //选择要删除的行 if (rows.length > 0) { $.messager.confirm("提示", "你确定要删除吗?", function (r) { if (r) { var ids = []; for (var i = 0; i < rows.length; i++) { ids.push(rows[i].ID); } //将选择到的行存入数组并用,分隔转换成字符串, //本例只是前台操作没有与数据库进行交互所以此处只是弹出要传入后台的id alert(ids.join(',')); } }); } else { $.messager.alert("提示", "请选择要删除的行", "error"); } } }, '-', { text: '修改', iconCls: 'icon-edit', handler: function () { //修改时要获取选择到的行 var rows = datagrid.datagrid("getSelections"); //如果只选择了一行则可以进行修改,否则不操作 if (rows.length == 1) { //修改之前先关闭已经开启的编辑行,当调用endEdit该方法时会触发onAfterEdit事件 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } //当无编辑行时 if (editRow == undefined) { //获取到当前选择行的下标 var index = datagrid.datagrid("getRowIndex", rows[0]); //开启编辑 datagrid.datagrid("beginEdit", index); //把当前开启编辑的行赋值给全局变量editRow editRow = index; //当开启了当前选择行的编辑状态之后, //应该取消当前列表的所有选择行,要不然双击之后无法再选择其他行进行编辑 datagrid.datagrid("unselectAll"); } } } }, '-', { text: '保存', iconCls: 'icon-save', handler: function () { //保存时结束当前编辑的行,自动触发onAfterEdit事件如果要与后台交互可将数据通过Ajax提交后台 datagrid.datagrid("endEdit", editRow); } }, '-', { text: '取消编辑', iconCls: 'icon-redo', handler: function () { //取消当前编辑行把当前编辑行罢undefined回滚改变的数据,取消选择的行 editRow = undefined; datagrid.datagrid("rejectChanges"); datagrid.datagrid("unselectAll"); } }, '-'], onAfterEdit: function (rowIndex, rowData, changes) { //endEdit该方法触发此事件,保存代码是否这里写??? //还需要判断combobox是否选中性别,而不是默认值 console.info(rowData); editRow = undefined; }, onDblClickRow: function (rowIndex, rowData) { //双击开启编辑行 if (editRow != undefined) { datagrid.datagrid("endEdit", editRow); } if (editRow == undefined) { datagrid.datagrid("beginEdit", rowIndex); editRow = rowIndex; } } }); }); </script> 1、怎么提交保存? 2、怎么在保存提交的时候判断combobox选中的不是“请选择” 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览