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)舍入的必要性: 并不是所有的十进制中描述的信息都能使用二进制存储,处 ...
随机推荐
- Python并发编程之进程通信
''' 进程间的通信 ''' """ multiprocessing模块支持进程间通信的两种主要形式:管道和队列 都是基于消息传递实现的, ""&qu ...
- Checkout 显示 URL /../../.. 不存在
Checkout 显示 URL /../../.. 不存在 Checkout 显示 URL /../../.. 不存在 如果库的路径是 svn库的路径为:/usr/local/svn/test/ 启动 ...
- LOJ#107. 维护全序集（FHQ Treap）
题面 传送门 题解 板子,没啥好说的 //minamoto #include<bits/stdc++.h> #define R register #define inline __inli ...
- three.js 居中-模型
api: 代码: <!DOCTYPE html> <html lang="en"> <head> <title>three.js w ...
- Android 开发基础入门篇: 动态权限申请
说明: 咱们在安装APP的时候经常会看到,类似于下面的提示 goolge为了保护用户隐私,在android 6.0开始,某些隐私权限,必须用户允许以后,内部程序方可使用 这就涉及到权限动态申请问题. ...
- ESA2GJK1DH1K升级篇: 升级STM32 预热: 单片机定时 使用 http 获取云端文本文件里面的内容,然后显示在液晶屏
前言: 实现功能概要 STM32使用AT指令控制Wi-Fi以TCP方式连接咱上节安装的Web服务器,然后使用http的get协议获取云端文本文件里面的内容, 然后把获取的数据显示在OLED液晶屏. ...
- 蒟蒻所见之DP
本文有错是正常的,因为这只是一部成长史,并非教学博文. 会常年更下去. 2019.10.24 DP,核心只是"表格法"而已. DP题真正所考察的,是: 1.对问题的描述.简化以及归 ...
- mac系统中怎么打开rar/zip等压缩文件?
平常使用mac的同学们,可能经常要接受下别人发过来的rar文件,可惜的时mac os x系统默认是不能打开rar文件(不知道以后苹果会支持rar不?),那么我们该如何去解圧rar文件,接下来我将介绍. ...
- sqlException 使用relace 替换单引号
我们从前端输入数据的时候,可能会输入一些 单引号 ,的字符 导致直接进行执行sql 语句保存的时候出现错误 如: 输入的有 单引号 保存按钮小代码 <asp:Button ID="bt ...
- 【转帖】nmap命令总结
nmap命令总结 https://www.cnblogs.com/chenqionghe/p/10657722.html 一.nmap是什么 nmap是一款网络扫描和主机检测的非常有用的工具,不局限于 ...