04.手把手教你 .Net EasyUI DataGrid(弹框式添加数据)

最新推荐文章于 2022-04-14 17:23:46 发布

lemoncorporation

最新推荐文章于 2022-04-14 17:23:46 发布

阅读量5k

点赞数 2

分类专栏： EasyUI .Net 文章标签： DataGrid EasyUI .net 添加数据

本文链接：https://blog.csdn.net/lemoncorporation/article/details/51485859

版权

本篇博客介绍了如何在.Net环境中，基于EasyUI DataGrid实现弹窗式添加数据到数据库的详细步骤，包括前台HTML、js代码、一般处理程序和实体类的编写，最终成功实现了数据的新增并展示。

摘要由CSDN通过智能技术生成

本章博客我将带你实现，在前一篇的基础上，新增实现弹框式添加数据到数据库的功能。（接下来的博客将会推出，修改，删除数据功能）

效果图，4-1：

所谓弹窗式，就像图4-1的那样，弹出一个窗口，用户输入信息然后新增到数据库，

前台HTML如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Add.aspx.cs" Inherits="web._20160522.Add" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #fm{
            margin:0;
            padding:10px 30px;
        }
        .ftitle{
            font-size:14px;
            font-weight:bold;
            padding:5px 0;
            margin-bottom:10px;
            border-bottom:1px solid #ccc;
        }
        .fitem{
            margin-bottom:5px;
        }
        .fitem label{
            display:inline-block;
            width:80px;
        }
        .fitem input{
            width:160px;
        }
    </style>

    <script src="../js/jquery-1.7.1.min.js"></script>
    <script src="../EasyUI/jquery.min.js"></script>
    <script src="../EasyUI/jquery.easyui.min.js"></script>
    <link href="../EasyUI/themes/icon.css" rel="stylesheet" />
    <script src="../EasyUI/locale/easyui-lang-zh_CN.js"></script>
    <link href="../EasyUI/themes/default/easyui.css" rel="stylesheet" />
    <script src="../js/add.js"></script>
</head>
<body>
    <table id="tb1"></table>
    <div id="tb" style="padding:5px">
        <div style="margin-bottom:5px">
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" οnclick="reload()">刷新</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" οnclick="newEqument()">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" οnclick="editEqument()">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" οnclick="destroyEqument()">删除</a>
        </div>
        <div>
            查询设备：<input id="eq" type="text" name="Eq" style="width:150px"/>
            <select id="order" class="easyui-combobox" panelHeight="auto" style="width:100px">
                <option value="asc">升序</option>
                <option value="desc">降序</option>
            </select>
            <a href