EasyUI使用

1>     下载EasyUI.下载地址：http://www.jeasyui.com/download/index.php

根据自己使用的是jquery还是Angular进行下载.我使用的是Jquery版本的。

2>     将easyui文件夹解压，添加到项目中。

3>     编写实现逻辑

1->新增一个名为easyui.go的控制器，编辑业务逻辑

2->在路由器中添加路由配置

3->新增easyui.html页面，作为展示效果使用

4>     实现的代码如下

1->easyui.go的代码如下:

package controllers

import (

    "secondweb/models"

    "fmt"

    "github.com/astaxie/beego"

)

type EasyUIController struct {

    beego.Controller

}

func (c *EasyUIController) Get() {

    c.TplName = "easyui.html"

}

type EasyUIDataController struct {

    beego.Controller

}

func (c *EasyUIDataController) Post() {

    //页数

    pageno,err:=c.GetInt("page")

    if err!=nil{

       fmt.Println(err)

    }

    //每页显示的记录数

    pagesize,err:=c.GetInt("rows")

    if err!=nil{

       fmt.Println(err)

    }

    //搜索的条件

    search:=c.GetString("search")

    userList:=models.SearchDataList(pagesize,pageno,search)

    listnum:=models.GetRecordNum(search)

    c.Data["json"]=map[string]interface{}{"total":listnum,"rows":userList};

    c.ServeJSON();

}

2->router.go的代码如下:

package routers

import (

"secondweb/controllers"

"github.com/astaxie/beego"

)

func init() {

beego.Router("/", &controllers.MainController{})

beego.Router("/Home/PageData", &controllers.UserController{})

beego.Router("/Home/PageNextData", &controllers.YonghuController{})

beego.Router("/Home/Index", &controllers.PageController{})

beego.Router("/Home/EasyUI", &controllers.EasyUIController{})

beego.Router("/Home/EasyUIData", &controllers.EasyUIDataController{})

}

　　

3->easyui.html的代码如下:

<!DOCTYPE html>

 

<html>

      <head>

        <title>首页 - 用户列表页面</title>

        <link rel="shortcut icon" href="/static/img/favicon.png" />

        <link rel="stylesheet" href="/static/easyui/themes/default/easyui.css" rel="stylesheet"/>

        <link rel="stylesheet" href="/static/easyui/themes/icon.css" rel="stylesheet"/>

        <link rel="stylesheet" href="/static/easyui/themes/default/datagrid.css" rel="stylesheet"/>

        <script type="text/javascript" src="/static/js/jquery-2.1.1.min.js"></script> 

        <script src="/static/easyui/jquery.easyui.min.js"></script>

        <script src="/static/easyui/locale/easyui-lang-zh_CN.js"></script>

      </head>    

    <body>

        <!--搜索部分-->

        <div class="row pull-right" style="margin-bottom: 20px;margin-right: 5px;text-align:right;margin-right: 40px;">

            <input type="text" placeholder="请输入名称" id="txt_search"/>

            <button class="" id="btn_search">搜索</button>

        </div>

        <!--数据内容部分-->

        <div class="cotMiddle" style="width:100%;height:450px;">

           <table class="tableList" id="datagrid" data-form="easyui" data-options="fit:true" cellspacing="0" cellpadding="0" border="0"></table>

        </div>

        <!--JS部分-->

       <script type="text/javascript">

         //列定义

         var cols = [[

                    { field: "ID", title: 'ID', width: 10, hidden: true },

                    { field: "ck", title: '', width: 20, checkbox: true },

                    { field: "Name", title: '名称', sortable: false, width: 100, align: 'center' },

                    { field: "Pwd", title: '密码', sortable: false, width: 150, align: 'center' },

                    { field: "Email", title: '邮箱', sortable: false, width: 250, align: 'center' },

                    { field: "Sex", title: '性别', sortable: false, width: 100, align: 'center' },

                    { field: "Phone", title: '手机号', sortable: false, width: 100, align: 'center' },

               ]];

    //页面的初始化

    $(function () {

        //搜索按钮的点击事件

        $("#btn_search").click(function (evt) {

            evt.preventDefault();

            var params = $("#datagrid").datagrid('options').queryParams;

            params.search = $("#txt_search").val();

            $("#datagrid").datagrid("load");

        });

        //输入框的回车事件

        $("#txt_search").keydown(function (event) {

            if (event.keyCode == 13) {

                event.preventDefault();

                $("#btn_search").click();

                return false;

            }

        });

        //加载Easyui数据

        LoadDatagrid();

    });

    //加载列表数据

    function LoadDatagrid() {

        var $dg = $("#datagrid");

        $dg.datagrid({

            title: '数据列表',

            url: '/Home/EasyUIData',

            fit: true,

            fitColumns: true,

            striped: true,

            nowrap: true,

            idField: 'ID',

            pagination: true,

            pageNumber: 1,

            pageSize: 20,

            pageList: [10, 20, 30, 45, 60, 75],

            rownumbers: true,

            singleSelect: false,

            loadMsg: "数据加载中...",

            queryParams: {

                saerch: $("#txt_search").val()

            },

            sortName: 'ID',

            sortOrder: 'desc',

            columns: cols,

            onLoadSuccess: function () {

                //多选时，加载完成后清除所有选中项（不然可能会有残留选中项）

                $dg.datagrid("clearSelections");

            },

            onDblClickRow: function (rowIndex, row) {

            },

            onSortColumn: function (sort, order) {

                $(".datagrid-view2 .datagrid-header .datagrid-cell .icon.iconfont:hidden").show();

                $(".datagrid-view2 .datagrid-header .datagrid-cell-c1-" + sort + " .icon.iconfont").hide();

            },

            loadFilter: function (data) {

                for (var i = 0; i < data.rows.length; i++) {

                    for (var att in data.rows[i]) {

                        if (typeof (data.rows[i][att]) == "string") {

                            data.rows[i][att] = data.rows[i][att].replace(/</g, "<").replace(/>/g, ">");

                        }

                    }

                }

                return data;

            }

        });

    }

</script>

    </body>

</html>

　　

5>     运行效果

6>     下一章节，文件的上传和下载

Beego 学习笔记10：Easyui使用的更多相关文章

  1. golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息

    golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...

  2. Beego学习笔记

    Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...

  3. Beego 学习笔记14：Session控制

    Session控制 1>     Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2>     Beego框架内置了 session 模块,目前 ...

  4. thinkphp学习笔记10—看不懂的路由规则

    原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...

  5. 《C++ Primer Plus》学习笔记10

    <C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<&l ...

  6. Beego学习笔记——Logs

    日志处理 这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...

  7. Beego学习笔记——Config

    配置文件解析 这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...

  8. Beego学习笔记——开始

    beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...

  9. SQL反模式学习笔记10 取整错误

    目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...

随机推荐

  1. fiddler常用功能

    原理 Fiddler是一个http协议调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出”Fiddler的数据(cookie,html,js,css等). ...

  2. maven jar包冲突的发现与解决[工具篇]

    本文是我的第177篇文章. 关于jar冲突排查解决的问题,相信很多小伙伴也都知道有一些,无非就是两类:命令 or 工具. 命令方式比如: mvn dependency:tree 工具方式比如: Mav ...

  3. arduino控制超声波

    //LingShun LAB #define Trig 2 //引脚Tring 连接 IO D2 #define Echo 3 //引脚Echo 连接 IO D3 float cm; //距离变量 f ...

  4. selenium--获取HTML源码断言和URL地址

    获取HTML源码 from selenium import webdriver import unittest class Test_source(unittest.TestCase): def Te ...

  5. SpringBoot与MyBatis整合案例

    1.导入依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId> ...

  6. JavaScript插件开发

    一.前言 通过 "WWW" 原则我们来了解 JavaScript 插件这个东西 第一个 W "What" -- 是什么?什么是插件,我就不照搬书本上的抽象概念了 ...

  7. Python网络爬虫神器PyQuery的使用方法

    #!/usr/bin/env python # -*- coding: utf-8 -*- import requests from pyquery import PyQuery as pq url ...

  8. 何为pc值

    PC就是程序计数器,就是指挥程序从哪里执行.如果是8位机,每个存储单元存放一个字节,指令有单字节.双字节和3字节.单片机复位时,PC=0000H,而后每执行一条指令,PC根据指令的字节数增加,如图:最 ...

  9. Python爬虫爬取BT之家找电影资源

    一.写在前面 最近看新闻说圣城家园(SCG)倒了,之前BT天堂倒了,暴风影音也不行了,可以说看个电影越来越费力,国内大厂如企鹅和爱奇艺最近也出现一些幺蛾子,虽然目前版权意识虽然越来越强,但是很多资源在 ...

  10. word2vec学习总结

    目录 1.简介 2.从统计语言模型开始 2.1序列概率模型 2.2 N元统计模型 3.深度序列模型 3.1神经概率模型 3.2 one-hot向量表示法 3.3 word2vec 3.4word2ve ...