05.手把手教你 .Net EasyUI DataGrid(完整的增删查改)

最新推荐文章于 2025-05-18 14:24:20 发布

lemoncorporation

最新推荐文章于 2025-05-18 14:24:20 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： EasyUI .Net

本文链接：https://blog.youkuaiyun.com/lemoncorporation/article/details/51516473

本章博客包含了完整的分页查询与增删查改功能的DataGrid，将代码赋值粘贴到指定的位置，并配置对应的数据库即可运行！如果看不懂可以查看我之前的博客，有详细解析：

效果图：5-1

前台html:

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

<!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/edit.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" onclick="reload()">刷新</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="AddEqument()">添加</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editEqument()">修改</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="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="#" class="easyui-linkbutton" iconCls="icon-search" onclick="obj.search()">查询</a>
        </div>
    </div>

    <%-- 弹窗  Start--%>
        <div id="dlg" class="easyui-dialog" style="width:400px;height:320px;padding:10px 20px"
            closed="true" buttons="#dlg-buttons">
        <div class="ftitle">设备信息</div>
        <form id="fm" method="post" novalidate>
            <div class="fitem">
                <label>设备编号:</label>
                <input name="Eq_Number" id="Eq_Number" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>出厂号:</label>
                <input name="Eq_SN" id="Eq_SN" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>名称:</label>
                <input name="Eq_Name" id="Eq_Name" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>型号:</label>
                <input name="Eq_Type" id="Eq_Type" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>规格:</label>
                <input name="Eq_Standard" id="Eq_Standard" class="easyui-textbox" required="true"/>
            </div>
            <div class="fitem">
                <label>厂家:</label>
                <input name="Eq_Producer" id="Eq_Producer" class="easyui-textbox" required="true"/>
            </div>
        </form>
    </div>
    <div id="dlg-buttons">
        <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveEqument()" style="width:90px">Save</a>
        <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Cancel</a>
    </div>
    <%-- 弹窗  End --%>
</body>
</html>

实现增删查改的JS代码：

$(function () {
    $('#tb1').datagrid({
        url: '../20160521/EasyUI_load.ashx',
        width: 1100,
        title: '设备管理',
        method: 'get',
        toolbar: '#tb',
        singleSelect:'true',
        columns: [[
            { field: 'numID', title: '设备编号', width: 150 },
            { field: '出厂号', title: '出厂号', width: 150 },
            { field: '仪器名称', title: '名称', width: 150 },
            { field: '型号', title: '型号', width: 200 },
            { field: '规格', title: '规格', width: 150 },
            { field: '厂家', title: '厂家', width: 200 },
        ]],
        pagination: true,
        pageSize: 10,
        pageList: [10, 15, 20, 25],
    })
})

$(function () {
    obj = {
        search: function () {
            $('#tb1').datagrid('load', {
                Equement: $('input[name="Eq"]').val(),
                order: $("#order").combobox('getValue')
            });
        }
    }
})

function reload() {
    document.getElementById("eq").value = ""
    $('#tb1').datagrid('load', {
        url: '../20160521/easyui_load.ashx',
        page: '1',
        rows: '10'
    });
}

var add_edit;
function AddEqument() {
    $('#dlg').dialog('open').dialog('center').