Beego 学习笔记10：Easyui使用
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使用的更多相关文章
- golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息
golang学习笔记10 beego api 用jwt验证auth2 token 获取解码信息 Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放 ...
- Beego学习笔记
Beego学习笔记 Go 路由(Controller) 路由就是根据用户的请求找到需要执行的函数或者controller. Get /v1/shop/nike ShopController Get D ...
- Beego 学习笔记14：Session控制
Session控制 1> Session常用来作为全局变量使用,比如记录当前登录的用户,或者页面之间传递数据使用. 2> Beego框架内置了 session 模块,目前 ...
- thinkphp学习笔记10—看不懂的路由规则
原文:thinkphp学习笔记10-看不懂的路由规则 路由这部分貌似在实际工作中没有怎么设计过,只是在用默认的设置,在手册里面看到部分,艰涩难懂. 1.路由定义 要使用路由功能需要支持PATH_INF ...
- 《C++ Primer Plus》学习笔记10
<C++ Primer Plus>学习笔记10 <<<<<<<<<<<<<<<<<&l ...
- Beego学习笔记——Logs
日志处理 这是一个用来处理日志的库,它的设计思路来自于database/sql,目前支持的引擎有file.console.net.smtp,可以通过如下方式进行安装: go get github.co ...
- Beego学习笔记——Config
配置文件解析 这是一个用来解析文件的库,它的设计思路来自于database/sql,目前支持解析的文件格式有ini.json.xml.yaml,可以通过如下方式进行安装: go get github. ...
- Beego学习笔记——开始
beego简介 beego是一个快速开发Go应用的http框架,他可以用来快速开发API.Web.后端服务等各种应用,是一个RESTFul的框架,主要设计灵感来源于tornado.sinatra.fl ...
- SQL反模式学习笔记10 取整错误
目标:使用小数取代整数 反模式:使用Float类型 根据IEEE754标识,float类型使用二进制格式编码实数数据. 缺点:(1)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...
随机推荐
- acwing 算法面试、笔试题公开课整理记录
week1 Google KickStart 2019 A轮 讲解视频地址AcWing 549. 训练 tag: 排序 遍历 在线练习地址AcWing 550. 包裹 在线练习地址Ac ...
- 01-C#笔记-hello_world
/* * 主文件是 xxx.cs * 基本的 hello world 程序如下: */ using System; using System.Collections.Generic; using Sy ...
- SpringBoot如何切换Redis默认库
一些闲扯的话 我们清楚,Redis 尽管提供了 16 个索引库,但是每个数据库之间是隔离互不共享的,客户端默认连接使用的是 0 号数据库 . 注意:上方情况是基于单机 Redis 的,在集群模式下是没 ...
- 待办事项App 评测
1. 敬业签 2. Microsoft To-Do(奇妙清单) 3. Evernote 4.one note 5.Google Keep 6.to-do-ist 7.365 日历 8.Any.Do 9 ...
- 删除github中某个文件夹
在上传项目到github时,忘记忽略了某个文件夹target,就直接push上去了, 最后意识到了此问题,决定删除掉远程仓库中的target文件夹 删除前: 删除后: 在github上只能删除仓库,却 ...
- 如何更新GitHub上的代码？
更新github上的代码 一.克隆代码 1.先是把自己GitHub上的代码克隆到本地(下载到本地) 步骤1.随便创建一个新文件夹(用来存放下载下来的代码) 步骤2.在文件夹中打开cmd 输入下载指令下 ...
- C# Cef winform 脚本的执行 踩过的坑
先从后端代码 如何执行js 代码谈起; 一个简单的需求: 在winform上点击一个按钮,实现登录信息的填入 流程: 就是让C#去运行一段脚本,. 运行的方式有两种, 异步与同步, 因为CEF是一帧一 ...
- [技术博客]升级 API 面临的问题
升级 API 面临的问题 我们使用的上一届的版本中,使用的底层的 安卓的 API 是 Android7.0 .在这一版本中,我们将 API进行了升级,为了更好的兼容新功能.(发送通知),我们在升级 A ...
- YYCache 的整体架构类图

- LinkedHashMap源码
TreeMap是一颗红黑树做Map.HashMap是数组+链表+红黑树.HashTable是数组+链表. LinkedHashMap底层存储结构与HashMap一样,不同的是LinkedHashMap ...