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. 201871010135 张玉晶 《面向对象程序设计（java）》第二周学习总结

    201871010135 张玉晶 <面向对象程序设计(java)>第二周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  2. yoast breadcrumb面包屑导航修改去掉product

    前面我们创建了wordpress添加post_type自定义文章类型和调用自定义post_type文章,现在yoast 面包屑导航出现home >product >分类1,想要把produ ...

  3. 05-C#笔记-基本变量

    1. 不支持括号初始化: 2. 支持强制类型转化: 3.运算规则同C++ 参考: http://www.runoob.com/csharp/csharp-variables.html

  4. split分割字符串返回字符串数组

    <script type="text/javascript"> var str='liu jin yu'; var str1=str.split(' '); docum ...

  5. Windbg源代码窗口的使用

    在 WinDbg 中,源窗口显示已加载到调试器中的源文件. 如何打开源代码窗口 通过菜单File--->Open Source File打开源代码文件,窗口随之打开 通过快捷键Ctrl+O 通过 ...

  6. 洛谷 P2996 [USACO10NOV]拜访奶牛Visiting Cows

    P2996 传送门 题意: 给你一棵树,每一条边上最多选一个点,问你选的点数. 我的思想: 一开始我是想用黑白点染色的思想来做,就是每一条边都选择一个点. 可以跑两边一遍在意的时候染成黑,第二遍染成白 ...

  7. Spring Boot 知识笔记（整合Mybatis续-补充增删改查）

    续上篇,补充数据库增删改查的其他场景. 一.Mapper中添加其他场景操作 package net.Eleven.demo.Mapper; import net.Eleven.demo.domain. ...

  8. 为什么需要动态SQL

    为什么需要动态SQL 在使用EF或者写SQL语句时,查询条件往往是这样一种非常常见的逻辑:如果客户填了查询信息,则查询该条件:如果客户没填,则返回所有数据. 我常常看到很多人解决这类问题时使用了错误的 ...

  9. Spring JdbcTemplate使用别名传参（NamedParameterJdbcTemplate）

    原文地址http://www.voidcn.com/article/p-cwqegtpg-hx.html 在使用JdbcTemplate时,一般传参都是用的?来绑定参数,但是对于某种情况就不适用了,例 ...

  10. Docker中nginx+tomcat实现负载均衡

    拉取tomcat镜像 docker pull tomcat 运行两个tomcat容器 docker run -d -p 8088:8080 --name tomcat8088 tomcat docke ...