ASP.NET+ Jquery - easyUI开发篇（一）easyui的datagrid组件的使用

最新推荐文章于 2020-06-27 11:40:58 发布

置顶

xwlovexj

最新推荐文章于 2020-06-27 11:40:58 发布

阅读量833

点赞数 3

分类专栏：技术Blog 文章标签： ASP.NET+EayUI 前端框架 html csss Javascript

本文链接：https://blog.csdn.net/qq_37433527/article/details/101475468

版权

写在前面：本人是来自一所地方性大学的大四的本科生是第一次写技术blog，之前做了一个shibai的项目自己承诺过要把代码分享出来。。现在由于某些原因已经弃用ASP.NET了，但是回想之前学习的时候发现这种有针对某个框架的开发没多少技术资源，现特奉上自己的一点点意见，希望对大家有用....加油coding（其实我发现写再多的代码也没有实际的和一个妹子相处好，为什么有这种感慨呢，最近喜欢上一个妹子了，有点感慨吧。。希望大家都能和自己喜欢的人在一起吧）

进入正题：开发工具 vs 2013+SQL server 2013

前期知识介绍

看懂本文需要有 C#基础知识 +SQL知识+Jquery+HTML +CSS+ASP.NET Web编程知识

easyui 的datagrid插件介绍：

在HTML中页面引入datagrid组件：

1）HTML的方式 :相信懂html的朋友都看的懂

<table class="easyui-datagrid">
    <thead>
		<tr>
			<th data-options="field:'code'">Code</th>
			<th data-options="field:'name'">Name</th>
			<th data-options="field:'price'">Price</th>
		</tr>
    </thead>
    <tbody>
		<tr>
			<td>001</td><td>name1</td><td>2323</td>
		</tr>
		<tr>
			<td>002</td><td>name2</td><td>4612</td>
		</tr>
	</tbody>
</table>

2）js的方式引入easy的datagrid组件和上面的效果是一样的

先在 html中引入一个空table标签

<table id="dg"></table>

--js代码：
$('#dg').datagrid({
    url:'datagrid_data.json',
    columns:[[
		{field:'code',title:'Code',width:100},
		{field:'name',title:'Name',width:100},
		{field:'price',title:'Price',width:100,align:'right'}
    ]]
});

我实现的效果和我的代码：

抹去学校文字

现在讲解怎么实现表格的加载：(上自己的代码。。。我爱你 w.x.l)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PostKq.aspx.cs" Inherits="EasyUI的例子.webcontent.PostKq" %>
<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<!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>
       <script  type="text/javascript" src="../Script/jquery-3.3.1.js"></script>
    <script  type="text/javascript" src="../Script/jquery-3.3.1.min.js"></script>
     <link href="../easyui/themes/default/easyui.css" rel="stylesheet" />
    <link href="../easyui/themes/icon.css" rel="stylesheet" />
    <script  type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script  type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#dd').dialog('close');
            $('#dg').datagrid({
                url: '../webcontent/LoadClassStudentData.ashx',
                singleSelect: 'true',
                
                width:500,
                columns: [[
                       { field: 'sno', title: '学号', width: 100, align: 'left' },
                    { field: 'class_id', title: '班级', width: 100 },
                    { field: 'grade', title: '年级', width: 50, align: 'left' },
                      { field: 'sname', title: '姓名', width: 60, align: 'left' },
                     { field: 'levels', title: '层次', width: 50, align: 'left' },
                        {
                            field: 'xxxxx', title: '操作', width: 100, align: 'left', formatter: function (value, row, index) {
                                return "<a href='#' onclick='update("+index+")' >点击提交考勤</a> ";
                            }
                        }
                ]],
                toolbar: [{
                    iconCls: 'icon-edit',
                    handler: function () { }
                }, '-', {
                    iconCls: 'icon-help',
                    handler: function () { }
                }],
                striped: true,
                // 显示分页工具栏
                pagination: true,
                pageList: [5, 10]
            });
            //提交数据
            $('#btnSave').click(function () {
                var week = $('#week').val();
                var quekuang = $('#quekuang').val();
                var late = $('#late').val();
                var wdm = $('#wdm').val();
                var sno = $('#sno').val();
                var details = $('#details').val();
                if (week.trim() == '' || quekuang.trim() == '' || late.trim() == '' || wdm.trim() == '' || sno.trim() == '' || details.trim()=='') {
                    $.messager.alert('来自网页的消息', '还有数据未填写完成若没有的填0或者无！', 'info');
                }
                else {
                    //do ajax
                    var arr = new Array();
                    arr[0] = sno;
                    arr[1] = week;
                    arr[2] = quekuang;
                    arr[3] = late;
                    arr[4] = wdm;
                    arr[5] = details;
                    $.ajax({
                        type: "post",
                        url: "../webcontent/PostKq.aspx/InsertKq",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        data: JSON.stringify({ arr: arr }),//键值对
                        success: function (data) {
                            $.messager.alert('来自网页的信息', data.d, 'info');
                            setTimeout(function () {  //使用  setTimeout（）方法设定定时2000毫秒
                                $('#quekuang').val('');//页面刷新
                                 quekuang = $('#quekuang').val('');
                                 late = $('#late').val('');
                                wdm = $('#wdm').val('');
                                details = $('#details').val('');
                            }, 2000);
                        },
                        error: function (data) {
                            alert("出错了！");
                        }
                    });

                }
            });
        });
        function update(index) {
            $('#dg').datagrid('selectRow', index);
            var row = $('#dg').datagrid('getSelected');
         
            var sno = row["sno"];
            $('#sno').val(sno);
            $('#dd').dialog('open');
        }
        /*
        插入班级考勤信息的数据
        */
        function InsertClassKQ() {
         
            var qjtype = $('#tjtype').find('option:selected').text();//获取选中的值
            if (qjtype == '请选择') {
                $.messager.show({
                    title: '来自网页的消息',
                    msg: '必须选择一种提交类型！',
                    timeout: 3000,
                    showType: 'show',
                    style: {
                        right: '',
                        top: document.body.scrollTop + document.d