EasyUI基础（一）

最新推荐文章于 2024-05-27 12:07:42 发布

zt12

最新推荐文章于 2024-05-27 12:07:42 发布

阅读量654

点赞数

分类专栏：使用jQueryEasyUI提升客户体验文章标签： jquery ui web应用界面框架

本文链接：https://blog.csdn.net/qq_31781327/article/details/70195594

版权

使用jQueryEasyUI提升客户体验专栏收录该内容

3 篇文章 0 订阅

订阅专栏

EasyUI基础（一）

1. EasyUI简介
一个JQuery框架（插件），用于开发UI界面。
2. 搭建EasyUI项目开发环境
英文官网：http://www.jeasyui.com/
中文官网：http://www.jeasyui.net/ 下载EasyUI包
第一种方法
创建VisualC#-Web-ASP.NET空Web应用程序-导入UI包
第二种方法
可以新建解决方案再建立项目
VisualC#-其它项目类型-VisualStudio解决方案
这里写图片描述
3. 脚本框架引入

        <!--导入文件：-->
                    <!--皮肤文件  -->
    <link href="UI/themes/default/easyui.css" rel="stylesheet" />
    <!-- 小图标文件 -->
    <link href="UI/themes/icon.css" rel="stylesheet" />
    <!--JQuery文件  -->
    <script src="Scipts/jquery-1.8.2.js"></script>
    <script src="UI/jquery.easyui.min.js"></script>
    <!--中文编码脚本  -->
    <script src="UI/locale/easyui-lang-zh_CN.js"></script>

4. $(function() {})函数

<!-- js代码 -->
    <script type="text/javascript">
        $(function () {
        //alert("hello world");
        //$.messager.alert("提示：", "hello world");
        //EasyUI 对话框
            var student = {
                name: "aa", age: "22", pwd: "1234"
            }

            alert(student);
            alert(student.name);
            document.write(student);
        //Console对象：不会显示在静态页面，会显示在调试窗口
            console.log(student);//日志
            console.info(student);//一般信息
            console.debug(student);//除错信息
            console.warn(student);//警告提示
            console.error(student);//错误提示

        });
    </script>

5.HtmlPage1.html 整个页面代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--皮肤文件  -->
    <link href="UI/themes/default/easyui.css" rel="stylesheet" />
    <!-- 小图标文件 -->
    <link href="UI/themes/icon.css" rel="stylesheet" />
    <!--JQuery文件  -->
    <script src="Scipts/jquery-1.8.2.js"></script>
    <script src="UI/jquery.easyui.min.js"></script>
    <!--中文编码脚本  -->
    <script src="UI/locale/easyui-lang-zh_CN.js"></script>
    <!-- js代码 -->
    <script type="text/javascript">
        $(function () {
//alert("hello world");
//$.messager.alert("提示：", "hello world");//EasyUI 对话框
            var student = {
                name: "aa", age: "22", pwd: "1234"
            }

            alert(student);
            alert(student.name);
            document.write(student);
            console.log(student);//日志
            console.info(student);//一般信息
            console.debug(student);//除错信息
            console.warn(student);//警告提示
            console.error(student);//错误提示

        });
    </script>

</head>   
<body>
    <!--iconCls:设置一个16x16图标的CSS类ID显示在面板左上角。   -->
     <!--collapsible: 定义是否显示可折叠按钮。 -->
  <div id="p" class="easyui-panel" iconCls="icon-save" style ="width:500px;height:200px;padding:10px;" title="客户信息浏览"  collapsible="true">
    My EsayUI
  </div>
</body>
</html>

这里写图片描述
6.JSON
1、Json(JavaScript Object Notation)数据源：
一种轻量级的数据交换格式，是Easyui组件的数据源基本格式
2、JSON有两种表示结构，对象和数组。
对象结构以”{”大括号开始，以”}”大括号结束。中间部分由0或多个以”，”分隔的”key(关键字)/value(值)”对构成，关键字和值之间以”：”分隔，语法结构如代码。
{
key1:value1,
key2:value2,
…
}
数组结构以”[”开始，”]”结束。中间由0或多个以”，”分隔的值列表组成，语法结构如代码。
[
{
key1:value1,
key2:value2
},
{
key3:value3,
key4:value4
}
]
实例

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <!--皮肤文件  -->
    <link href="UI/themes/default/easyui.css" rel="stylesheet" />
    <!-- 小图标文件 -->
    <link href="UI/themes/icon.css" rel="stylesheet" />
    <!--JQuery文件  -->
    <script src="Scipts/jquery-1.8.2.js"></script>
    <script src="UI/jquery.easyui.min.js"></script>
    <!--中文编码脚本  -->
    <script src="UI/locale/easyui-lang-zh_CN.js"></script>
    <!-- js代码 -->
    <script type="text/javascript">
        //1,Json对象的使用
        var jsonDataUser = {
            "name": "小张",
            "age": "20",
            "email": "xiaozh@mstf.com",
            "userName": "Admininstrator",
            "userPwd": "123456",
        }
        console.info(jsonDataUser);

        //2,Json数组的使用
        var jsonArray = [
                     { "name": "aa", "sex": "女" },
                     { "name": "bb", "sex": "男" },
                     { "name": "cc", "sex": "男" }
            ]

        console.info(jsonArray);
        $(function () {
            //3,Json对象和数组组合形式
            var jsonDataUser = {
                "name": "小张",
                "age": "20",
                "email": "xiaozh@mstf.com",
                "userName": "Admininstrator",
                "userPwd": "123456",
                "IP": [
                     { "id": "1", "IP": "165465156468156" },
                     {"id":"2","IP":"165465156468156"},
                     {"id":"3","IP":"165465156468156"}

                ]
            }
            $("#name").html(jsonDataUser.name);
            $("#age").html(jsonDataUser.age);
            $("#email").html(jsonDataUser.email);
            $("#userName").html(jsonDataUser.userName);
            $("#userPwd").html(jsonDataUser.userPwd);
            $.each(jsonDataUser.IP, function (i,item) {
                $("#IP").append("<option value='"+item.id+"'>"+item.IP+"</option>");
            })
        });
    </script>
    <style type="text/css">
        #table { width:100%}
        .left { text-align:left;font-size:16px;}
        .right { text-align:left;font-size:16px}

    </style>
</head>   
<body>
    <!--iconCls:设置一个16x16图标的CSS类ID显示在面板左上角。   -->
     <!--collapsible: 定义是否显示可折叠按钮。 -->
  <div id="p" class="easyui-panel" iconCls="icon-save" style ="width:500px;height:200px;padding:10px;" title="客户信息浏览"  collapsible="true">
  <table id="table">

    <tr>
        <td class="left">客户姓名：    <span id="name">加载中</span></td>
        <td class="right">客户年龄：   <span id="age">加载中</span></td>
    </tr>

    <tr>
       <td class="left">客户邮箱：    <span id="email">加载中</span></td>
      <td class="right">客户用户名：    <span id="userName">加载中</span></td>
    </tr>

    <tr>
     <td class="left">客户密码：    <span id="userPwd">加载中</span></td>
       <td class="right">IP号：    <select id="IP"></select></td>
    </tr>
  </table>
  </div>
</body>
</html>

这里写图片描述

zt12

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EasyUI基础（一）

EasyUI基础（一）1. EasyUI简介一个JQuery框架（插件），用于开发UI界面。 2. 搭建EasyUI项目开发环境英文官网：http://www.jeasyui.com/ 中文官网：http://www.jeasyui.net/ 下载EasyUI包第一种方法创建VisualC#-Web-ASP.NET空Web应用程序-导入UI包第二种方法可以新建解决方
复制链接

扫一扫

专栏目录