[asp.net] 解决easyui datagrid删除数据后不能自动更新

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zyxhangiian123456789/article/details/80897793

easyui datagrid插件数据的刷新是通过其reload方法实现的,数据的插入和更新都能够实时看到插入和修改的效果,reload方法实际上是重新向服务器发送了ajax请求。而今天在做文件上传的时候,删除操作的效果只能够通过刷新页面才能看到。

1.针对这一情况,笔者起初选择手动调用location.reload()手动刷新页面,显示删除后的数据。该方法的缺点在于是通过刷新页面达到数据更新的目的,如果想弹出提示框就,那么就会被页面刷新效果所覆盖。

2.根据easyui的api,可以看出,easyui提供了对dom元素的增删改查操作,实现前台数据和后台数据的同步增删改查。


下面给出笔者的实现代码(详细内容在deleteFile方法中):

<!DOCTYPE html>
<html>
<head>
    <title>管理员专家管理文档界面</title>
    <meta http-equiv="pragma" content="no-cache" />
    <script src="/Scripts/loading.js" type="text/javascript"></script>
    <link href="/EasyUI/themes/icon.css" rel="stylesheet" type="text/css" />
    <link href="/EasyUI/themes/gray/easyui.css" rel="stylesheet" type="text/css" />
    <script src="/EasyUI/jquery.min.js" type="text/javascript"></script>
    <script src="/EasyUI/jquery.easyui.min.js" type="text/javascript"></script>
    <script src="/Scripts/distinguishBrowser.js" type="text/javascript"></script>
    <script src="../EasyUI/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
    <script type="text/javascript">
        function doSearch() {
            //查找文件
            $.ajax({
                url: '/File/FileHandler.ashx?action=GetFile',
                type: 'POST',
                data: {
                    Name: $("#ss").val()
                },
                beforeSend: function () {
                    $.messager.progress({
                        text: '正在处理中...'
                    });
                },
                success: function (data) {
                    $.messager.progress('close');
                    data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                    $("#dg").datagrid('loadData', data);
                }
            });
        }
    </script>
</head>
<body>
    <table id="dg" class="easyui-datagrid" title="文件列表" url="/File/FileHandler.ashx?action=GetAll"
        pagination="true" toolbar="#toolbar" rownumbers="false" fitcolumns="true" singleselect="false">
        <thead>
            <tr>
                <th field="ck" checkbox="true">
                </th>
                <th field="Id" width="100" data-options="align:'center'">
                    文档编号
                </th>
                <th field="Name" width="150" data-options="align:'center'">
                    文档名
                </th>
                <th field="JZId" width="120" data-options="align:'center',type:'combobox',valueField: 'text', textField: 'id', url: '/JZ/JZHandler.ashx?action=GetAllJZId', required: true">
                    机组编号
                </th>
                <th field="UploadTime" width="120" data-options="align:'center'">
                    上传时间
                </th>
                <th field="Note" width="120" data-options="align:'center',formatter:myformatter">
                    操作
                </th>
            </tr>
        </thead>
    </table>
    <div id="toolbar" border="true" style="border: 1px solid #ddd; height: 32px; padding: 2px 5px;
        background: #fafafa;">
        <div style="float: left;">
            <a href="#" class="easyui-linkbutton" plain="true" onclick="addFile()" icon="icon-add">
                新增</a>
        </div>
        <div class="datagrid-btn-separator">
        </div>
        <div style="float: left;">
            <a href="#" class="easyui-linkbutton" plain="true" onclick="deleteFile()" icon="icon-remove">
                删除</a>
        </div>
        <div id="tb" style="float: right;">
            <input id="ss" class="easyui-searchbox" searcher="doSearch" prompt="请输入文件名" style="width: 160px;
                vertical-align: middle;"></input>
        </div>
    </div>
    <!--对话框-->
    <div id="dlg" class="easyui-dialog" style="width: 400px; padding: 10px 20px" closed="true"
        buttons="#dlg-buttons">
        <form id="fm" method="post" enctype="multipart/form-data">
        <div style="margin-bottom: 20px">
            <input id="cc2" class="easyui-combobox" name="JZId" label="机组编号" style="width: 100%"
                data-options="valueField: 'id', textField: 'text', url: '/JZ/JZHandler.ashx?action=GetAllJZId',required:true" />
        </div>
        <div style="margin-bottom: 20px">
            <input id="File" class="easyui-filebox" name="File" style="width: 100%" data-options="label:'文档名:',required:true,buttonText:'选择文件',prompt:'不限制文件格式'" />
        </div>
        <div style="margin-bottom: 20px">
            <input id="cc1" class="easyui-textbox" name="Type" label="类型" style="width: 100%"
                data-options="valueField:'id',textField:'text',required:false">
        </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="#" class="easyui-linkbutton" iconcls="icon-ok" onclick="saveFile()">保存</a>
        <a href="#" class="easyui-linkbutton" iconcls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">
            取消</a>
    </div>
    <script type="text/javascript">
        function myformatter(value) {
            return "<a href='" + value + "' >下载</a>";
        }
        function addFile() {
            $('#dlg').dialog('open').dialog('setTitle', '添加文档信息');
            $('#fm').form('clear');
        }
        function deleteFile() {
            //删除时先获取选择行
            var rows = $("#dg").datagrid("getSelections");
            //选择要删除的行
            if (rows.length > 0) {
                $.messager.confirm("提示", "你确定要删除吗?", function (r) {
                    if (r) {
                        //获取所有要删除的文档的编号
                        var ids = [];
                        var rowindex = [];
                        for (var i = 0; i < rows.length; i++) {
                            ids.push(rows[i].Id);
                            var index = $("#dg").datagrid('getRowIndex', rows[i]);
                            //保存列的信息
                            rowindex.push(index);
                        }
                        //按照从小到大排序
                        rowindex.sort();
                        //执行数据删除操作
                        $.ajax({
                            url: '/File/FileHandler.ashx?action=Delete',
                            type: 'POST',
                            async: false,
                            data: {
                                Id: ids.join(',')
                            },
                            beforeSend: function () {
                                $.messager.progress({
                                    text: '正在处理中...'
                                });
                            },
                            success: function (data) {
                                $.messager.progress('close');
                                data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                                if (data.Success) {
                                    //手动删除表格数据
                                    for (var i = rowindex.length - 1; i >= 0; i--) {
                                        $("#dg").datagrid('deleteRow', rowindex[i]);
                                    }
                                    $.messager.show({
                                        title: '操作提醒',
                                        msg: data.Message
                                    });
                                } else {
                                    $.messager.show('删除失败', data.Message, 'warning');
                                }
                            }
                        });
                    }
                });
            } else {
                $.messager.alert("操作提示", "请选中需要删除的文档所在的行!", 'info');
            }
        }
        function saveFile() {
            url1 = '/File/FileHandler.ashx?action=Add';
            if (getBrowserType() == "Chrome") {
                $.ajax({
                    url: url1,
                    async: false,
                    type: "POST",
                    cache: false, //上传文件不需要缓存
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    data: new FormData($('#fm')[0]), 
                    beforeSend: function () {
                        return $('#fm').form('validate');
                    },
                    success: function (data) {
                        data = eval('(' + data + ')');      //将一个json字符串解析成js对象
                        $.messager.alert("操作提示", data.Message, 'info'); //显示后台信息
                        if (data.Success) {
                            $('#dlg').dialog('close'); 	    //关闭弹出框
                            $("#dg").datagrid('reload');
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    }
                });
            } else {
                $('#fm').form('submit', {
                    url: url1, //注意添加和修改的url不同
                    onSubmit: function () {
                        //验证表单是否合法
                        return $(this).form('validate');
                    },
                    success: function (res) {
                        data = eval('(' + res + ')');      //将一个json字符串解析成js对象
                        $.messager.alert("操作提示", data.Message, 'info'); //提示后台错误信息
                        if (data.Success) {
                            $('#dlg').dialog('close'); 	    //关闭弹出框
                            $('#dd').datagrid('reload');    //重新加载数据
                        }
                    }
                });
            }
        }
    </script>
</body>
</html>

不过有一点更奇怪的是,saveFile方法同样采用reload,却可以实时显示文件添加的动态效果。如果哪位大神知道的话希望能够评论指教。

对数据元素进行删除的时候一般是倒序删除,原因是正序删除可能会发生索引编号错位。具体操作入下:

//从行集合中删除若干行
function deleterows(allrows, selectedrows) {
      //寻找选择行所在的索引行
      var idsarr = [];
      for (var i = 0; i < selectedrows.length; i++) {
          for (var j = 0; j < allrows.length; j++) {
              if (allrows[j].Id == selectedrows[i].Id) {
                  idsarr.push(j);
              }
           }
      }
      //倒序排列
      idsarr = idsarr.sort();
      idsarr = idsarr.reverse();
      //删除元素
      for (var i = 0; i < idsarr.length; i++) {
         allrows.splice(idsarr[i], 1);
      }
}
function callQueue(){
	edit_url = "queueRecord.htm?op=callQueue";
	var row = $('#dg').datagrid('getSelected');
	// 获取选中行的Index的值
	var rowIndex=$('#dg').datagrid('getRowIndex',$('#dg').datagrid('getSelected'));
	if(rowIndex != 0){
		$.messager.alert("提示","请按照排号顺序叫号!");
		return false;
	}else{
		$('#call').dialog('open').dialog('setTitle', '叫号');
		$('#callfm').form('clear');
		$("#id").val(row.id);
		$("#code").val(row.numberType+row.code);
	}
}

参考:EasyUi datagrid选中行的index值

阅读更多

扫码向博主提问

CallMeJacky

技术无价
  • 擅长领域:
  • C#
  • STM32
去开通我的Chat快问
想对作者说点什么?

博主推荐

换一批

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