模式对话框和js操作gridview （Datagrid）

最新推荐文章于 2021-03-21 17:56:10 发布
最新推荐文章于 2021-03-21 17:56:10 发布
阅读量1.3k 收藏
点赞数
分类专栏： WebForm 文章标签： web开发 webform gridview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/godloveshun/article/details/23295743
版权
    设计网站交互时，尽量不要有太多的弹出框，这样对用户来说很突兀，打开多个弹出窗口后，都不知道哪一个是哪一个，有的是模式对话框，弹出一个后，主窗口不能正常操作，浏览器也不能关闭，必须关掉该对话框；技术上要考虑主窗口和子窗口的通讯，数据传递，刷新子窗口时也会遇到另开页面的情况；一般的，浏览网页时，以下情况可能会用到弹出框：
1、小的操作，要求简单的交互，比如输入用户名、身份二次验证；
2、上传附件，支持拖曳操作时，把上传功能放在一个复杂页面上或直接新开一个页面操作完成后在返回倒不如直接弹出一个对话框；
3、操作上有逻辑先后要求的，必须登录成功才可以跳转到另一个页面，比如网易云阅读主页可以正常浏览，但是要查看个人订阅的资讯和专题列表就必须登录；

    在网页上实现弹出框操作，目前用过的有这几种方法：jquery showdialog() 、window.open()、window.showModalDialog（）。前几天工作上遇到一个需求：在主窗口A上点击按钮弹出窗口，从gridview中选择人员，返回选中人员的id信息并关闭当前窗口；把返回的值保存在隐藏域中，方便主页面使用，有以下问题：
1、从主窗口A跳转到子窗口怎么接收返回的值？
2、js操作gridview，收集到选中的值
3、怎么处理数据格式

    思路：
    页面间传值有不少方法，可以通过url地址发送get请求，或隐藏域post表单等；在这使用window.showModalDialog()模式对话框。主要原因：可以把主窗口中的对象传递到子窗口，子窗口中的数据可以通过window.returnValue方式返回。如下一个例子：
root=window.showModalDialog('SelectPersons.aspx',root,'dialogWidth=630px;dialogHeight=520px;center=yes;scroll:yes;') 有三个参数，后面两个是可选参数，指定要跳转的url地址，root是传递到子窗口的对象；第三个参数是设置弹出框的状态。

    gridview最终输出到html页上是一个表格，通过js获取到input集合，从中筛选出checkbox标签，可以取到选中的值。

    操作数据可以使用数组、拼接一个字符串、xmlDocument对象等方式。

   A窗口aspx页 
<% @ Page Language="C#" AutoEventWireup="true" CodeBehind="TestModalWindow.aspx.cs"
    Inherits="Test.TestModalWindow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></ title>
    <script type="text/javascript">
        /* 人员选择 */
        function SelectPerson() {
            //xml结构：如后台说明
            var obj = document.getElementById('hidPersonInfo' );
            var xmlData = obj.value;
            var root = null ;

            if (xmlData != "" ) {
                var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
                xmldoc.loadXML(xmlData);
                root = xmldoc.documentElement; //返回根节点
            }
            root = window.showModalDialog( 'SelectPersons.aspx', root, 'dialogWidth=630px;dialogHeight=520px;center=yes;scroll:yes;' );
            if (root != null ) {
                var strValue = "" ;
                var guidValue = "" ;
                obj.value = root.xml;
                //行循环
                for (var k = 0; k < root.childNodes.length; k++) {
                    //行节点
                    var rowNode = root.childNodes.item(k);
                    //列循环
                    for (var i = 0; i < rowNode.childNodes.length; i++) {
                        //列节点
                        var currNode = rowNode.childNodes.item(i);
                        //列名
                        var strName = currNode.getAttribute("Name" ).toLowerCase();
                        if (strName == "name" ) {
                            strValue += currNode.getAttribute( "Value") + "," ;
                        }
                        else if (strName == "personguid") {
                            guidValue += currNode.getAttribute( "Value") + "," ;
                        }
                    }
                }
                if (strValue.length > 0) {
                    strValue = strValue.substring(0, strValue.length - 1);
                }
                if (guidValue.length > 0) {
                    guidValue = guidValue.substring(0, guidValue.length - 1);
                }
                document.getElementById( "hidPersonInfo").value = guidValue;
                document.getElementById( "txtPersonsName").value = strValue;
            }
        }
        /* 清空已选择人员 */
        function ClearPerson() {
            document.getElementById( 'hidPersonInfo').value = "" ;
            document.getElementById( "txtPersonsName").value = "" ;
        }

        function ShowVal() {
            var val = document.getElementById('hidPersonInfo' ).value;
            alert( "选择姓名对应的guid：" + val);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        下面是测试： <br />
        姓名： <input type="text" id="txtPersonsName" name="txtPersonsName" />
        <input type="button" value="人员选择" οnclick="SelectPerson()" />
        <input type="hidden" runat="server" id="hidPersonInfo" name="hidPersonInfo" />
        <input type="button" value="显示选择的guid" οnclick="ShowVal()" />
    </div>
    </form>
</body>
</html>

  子窗口页 
<% @ Page Language="C#" AutoEventWireup="true" CodeBehind ="SelectPersons.aspx.cs"
    Inherits ="Test.SelectPersons" %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml">
< head runat ="server">
    < title></ title >
    < script type ="text/javascript">
        //xml结构：如后台说明
        var root = null ; //xml节点的根节点
        var xmldoc = null ;

        window.onload = function () {
            root = window.dialogArguments; //接收传递过来的参数
            //加载已被选择的信息
            if (xmldoc != null ) {
                xmldoc = root.ownerDocument; //返回文档对象
            }
            else {
                xmldoc = new ActiveXObject("Microsoft.XMLDOM" );
            }
            //将已存在的选择信息显示到顶部
            var strValue = "" ;
            if (root != null ) {
                //行循环
                for (var k = 0; k < root.childNodes.length; k++) {
                    //行节点
                    var rowNode = root.childNodes.item(k);
                    //列循环
                    for (var i = 0; i < rowNode.childNodes.length; i++) {
                        //列节点
                        var currNode = rowNode.childNodes.item(i);
                        //将姓名内容取出来，进行组合显示
                        var strName = currNode.getAttribute("Name" ).toLowerCase();
                        if (strName == "name" ) {
                            strValue += currNode.getAttribute( "Value" ) + "," ;
                        }
                    }
                }
                if (strValue.length > 0) {
                    strValue = strValue.substring(0, strValue.length - 1);
                }
            }
            document.getElementById( "SelectedTitle" ).innerText = "已选择：" + strValue;
        }


        /* 确认选择并关闭 */
        function okClick() {
            //判断是否已存在节点信息,不存在创建根节点
            if (root == null ) {
                //创建根节点****************************************************
                root = xmldoc.createElement( "EnterpriseInfo" );
            }
            //DataGrid列表数据选择[加载到xml节点中]
            var nCount = document.getElementById("dgrdHortationList" );
            var chks = nCount.getElementsByTagName( 'input');
            for (var i = 0; i < chks.length; i++) {
                if (chks[i].type = 'checkbox' ) {
                    if (chks[i].checked) {
                        //将PersonGUID,PersonTypeGUID,Name加载到xml节点中
                        var temp = chks[i].value;
                        var arry = temp.split('|' );
                        //检测本企业是否已选过,是的话就不允许再添加
                        var personGUID = arry[0];
                        var node = root.selectSingleNode("//Column[@Name='PersonGUID' and @Value='" + personGUID + "']" );
                        if (node == null ) {
                            //创建行节点****************************************************
                            var rowNode = xmldoc.createElement("Row" );

                            //添加列节点****************************************************
                            rowNode = GetColumnNode(xmldoc, rowNode, "PersonGUID" , personGUID);    //人员GUID
                            rowNode = GetColumnNode(xmldoc, rowNode, "Name" , arry[1]);           //人员姓名
                            //将行节点追加到根节点中****************************************
                            root.appendChild(rowNode);
                        }
                    }
                }
            }

            //将选择的信息返回
            chooseItem(root);
        }



        /* 返回已选择的企业 */
        function chooseItem(item) {
            window.returnValue = item;
            window.close();
        }

        /* 组合有值的字段到xml结构中 */
        function GetColumnNode(xmldoc, rowNode, columnName, columnValue) {
            //只组合有值的字段到xml结构中
            if (columnValue != "" ) {
                var columnNode = xmldoc.createElement( "Column");
                //列对应字段名称
                var att = xmldoc.createAttribute("Name" );
                att.value = columnName;
                columnNode.setAttributeNode(att);
                //列对应字段值
                att = xmldoc.createAttribute( "Value" );
                att.value = columnValue;
                columnNode.setAttributeNode(att);
                rowNode.appendChild(columnNode);
            }
            return rowNode;
        }
    </ script>
</ head>
< body>
    < form id ="form1" runat ="server">
    < div>
        < input type ="hidden" id ="SelectedTitle" name ="SelectedTitle" />
        < input type ="button" value ="确定选择并关闭" onclick ="okClick()" />
        < asp: DataGrid ID ="dgrdHortationList" runat ="server" AutoGenerateColumns ="False" BorderWidth ="0"
            CellPadding ="0" CellSpacing ="0">
            < Columns>
                < asp: TemplateColumn >
                    < ItemTemplate>
                        < input type ="checkbox" value ="<% # Eval("guid") %>| <% # Eval("name") %>" />
                    </ ItemTemplate>
                </ asp: TemplateColumn >
                < asp: TemplateColumn HeaderText ="姓名">
                    < ItemStyle></ ItemStyle >
                    < ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "name" )%>
                    </ ItemTemplate>
                </ asp: TemplateColumn >
                < asp: TemplateColumn HeaderText ="性别">
                    < ItemTemplate>
                        <%# Eval( "sex") %>
                    </ ItemTemplate>
                </ asp: TemplateColumn >
                < asp: TemplateColumn HeaderText ="工作单位">
                    < ItemStyle></ ItemStyle >
                    < ItemTemplate>
                        <%# DataBinder.Eval(Container.DataItem, "workunit" )%>
                    </ ItemTemplate>
                </ asp: TemplateColumn >
            </ Columns>
        </ asp: DataGrid >
    </ div>
    </ form>
</ body>
</ html>

   存在的问题： 
1、var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); 实例化xmlDoc对象时，不能很好兼容chrome 、ff等主流浏览器，网上有方法和代码，测试还是不行，没找到问题原因；
2、在子窗口如有其他操作，如有查询、翻页、跳转都会新开页面，处理方法可以直接在header头部中间指定整个页面的打开方式，如：  <base target="_self" />
Demo下载

yss小虾米
关注
专栏目录
javascript 实现datagrid
高级项目经理、专注于技术架构、分享项目管理及职场心得
06-17 1708
1、本文主要是实现datagrid,分页采取的jQuery.pagination.js,首先我们需要引入jQuery与jQuery.pagination.js,然后实现datagrid，代码如下：
通过用js方法设置GridView高度
huanglaoban的博客
01-22 270
用js方法设置GridView高度 <script> window.onload = function () { grid.SetHeight(document.documentElement.clientHeight - 60); } </script> grid在此指当期页面gridview的客户端名。
DataGrid中使用Button操作
北亮的专栏
07-25 3492
首先在Datagrid里设置OnItemCommand事件，指向处理函数，然后在模板列加button，设置button的CommandName属性，在后台根据CommandName来判断点击了那个button，并进行处理。    &lt;asp:DataGrid id="DataGrid1" runat="server" OnItemCommand="itemComm"&gt;    &lt;Co...
JS实现GridView式的数据加载（带滚动条）
Monkey_Coder的博客
03-18 611
JS实现GridView式的数据加载
jqGrid选项配置
showbo的专栏
10-29 6166
jqGrid选项配置属性默认从静态变量$.jgrid.defaults中加载。英文版本的属性默认配置如下。本人下载的jqGrid4.4.0示例中暂时不支持中文语言的语言包，所以要配置为中文语言，只能通过重写下面表格列出的属性来实现。语言配置文件在demo目录js/i18n这个文件夹下，要改为其他语言加载对应的js语言配置文件即可。 －收缩JavaScript代码 $.jgrid={
给gridview添加确认对话框
aegckeir70762的博客
01-01 118
【转自http://www.cnblogs.com/doraeimo/archive/2007/01/01/609344.html】 方法1： private void DataGrid1_ItemCreated(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e) { ...
php表格datagrid插件,让datagrid表格
weixin_42378973的博客
03-21 328
EasyUI - DataGrid 去右边空白滚动条列在网上查了很长时间没有找到解决方法，干脆自已查看一下代码来解决吧，随是压缩过的，不过也还是好查的，工夫不负有心人，终于解决了，方法如下：一、我们先让表格自适应宽度文章天伟2013-11-24717浏览量【我们一起写框架】MVVM的WPF框架(五)—完结篇前言这篇文章是WPF框架系列的最后一篇，在这里我想阐述一下我对框架设计的理解。我对框架设计的...
Asp.net中GridView使用详解(很全，很经典 转来的)
maxma的博客
04-29 3626
GridView无代码分页排序 GridView选中，编辑，取消，删除 GridView正反双向排序 GridView和下拉菜单DropDownList结合 GridView和CheckBox结合 鼠标移到GridView某一行时改变该行的背景色方法一 鼠标移到GridView某一行时改变该行的背景色方法二 GridView实现删除时弹出确认对话框 GridView实现自动编号 ...
ASP.NET GridView 和GridData行单击与双击事件
05-26
提交更改后，触发RowUpdating事件，进行数据验证和更新操作；如果用户取消编辑，触发RowCancelingEdit事件，恢复到非编辑状态。 例如，你可以这样设置GridView的模板列以启用编辑模式： ```asp.net <asp:GridView ...
ASP.net GridView双击事件，弹出一个窗口显示详细信息
10-28
总的来说，ASP.NET GridView双击事件的实现涉及前端的JavaScript监听和后端的事件处理。通过结合这两种技术，我们可以为用户提供一种直观且易于操作的方式来查看数据的详细信息。在实际开发中，还需要考虑用户体验、...
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
09-05
总结来说，EasyUI的GridView通过`fitColumns`属性和`datagrid('resize')`方法相结合，可以轻松实现表格宽度的自适应，以适应不同窗口大小的场景，提升用户在浏览数据时的视觉体验。在实际开发中，根据项目的具体需求...
在单击了DataGrid某一行时弹一个自定义的网页并把这一行的信息显示在那个网页中
08-18
这通常通过在ASP.NET（如果使用C#或VB.NET）中的RowCommand事件或者在JavaScript中添加事件监听器来实现。在C#中，可以在后台代码中这样处理： ```csharp protected void GridView1_RowCommand(object sender, ...
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
省市区数据，完成三级联动，选择地区
09-21
省市区数据，完成三级联动，选择地区
机械原理课程设计网球自动捡球机.doc
最新发布
09-21
机械原理课程设计网球自动捡球机.doc
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
09-21
2024秋招华为笔试题大全-仅供参考具体需要根据实际修改
借助于Ascend310 AI处理器完成深度学习算法部署任务，
09-21
应用背景为变电站电力巡检，基于YOLO v4算法模型对常见电力巡检目标进行检测，并充分利用Ascend310提供的DVPP等硬件支持能力来完成流媒体的传输、处理等任务，并对系统性能做出一定的优化。.zip深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
基于深度学习的物体识别与抓取方法，六自由度机械臂，python编写程序.zip
09-21
深度学习是机器学习的一个子领域，它基于人工神经网络的研究，特别是利用多层次的神经网络来进行学习和模式识别。深度学习模型能够学习数据的高层次特征，这些特征对于图像和语音识别、自然语言处理、医学图像分析等应用至关重要。以下是深度学习的一些关键概念和组成部分： 1. **神经网络（Neural Networks）**：深度学习的基础是人工神经网络，它是由多个层组成的网络结构，包括输入层、隐藏层和输出层。每个层由多个神经元组成，神经元之间通过权重连接。 2. **前馈神经网络（Feedforward Neural Networks）**：这是最常见的神经网络类型，信息从输入层流向隐藏层，最终到达输出层。 3. **卷积神经网络（Convolutional Neural Networks, CNNs）**：这种网络特别适合处理具有网格结构的数据，如图像。它们使用卷积层来提取图像的特征。 4. **循环神经网络（Recurrent Neural Networks, RNNs）**：这种网络能够处理序列数据，如时间序列或自然语言，因为它们具有记忆功能，能够捕捉数据中的时间依赖性。 5. **长短期记忆网络（Long Short-Term Memory, LSTM）**：LSTM 是一种特殊的 RNN，它能够学习长期依赖关系，非常适合复杂的序列预测任务。 6. **生成对抗网络（Generative Adversarial Networks, GANs）**：由两个网络组成，一个生成器和一个判别器，它们相互竞争，生成器生成数据，判别器评估数据的真实性。 7. **深度学习框架**：如 TensorFlow、Keras、PyTorch 等，这些框架提供了构建、训练和部署深度学习模型的工具和库。 8. **激活函数（Activation Functions）**：如 ReLU、Sigmoid、Tanh 等，它们在神经网络中用于添加非线性，使得网络能够学习复杂的函数。 9. **损失函数（Loss Functions）**：用于评估模型的预测与真实值之间的差异，常见的损失函数包括均方误差（MSE）、交叉熵（Cross-Entropy）等。 10. **优化算法（Optimization Algorithms）**：如梯度下降（Gradient Descent）、随机梯度下降（SGD）、Adam 等，用于更新网络权重，以最小化损失函数。 11. **正则化（Regularization）**：技术如 Dropout、L1/L2 正则化等，用于防止模型过拟合。 12. **迁移学习（Transfer Learning）**：利用在一个任务上训练好的模型来提高另一个相关任务的性能。 深度学习在许多领域都取得了显著的成就，但它也面临着一些挑战，如对大量数据的依赖、模型的解释性差、计算资源消耗大等。研究人员正在不断探索新的方法来解决这些问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值