bui前端框架+yii整理
这个是做bui前端样式整合的时候记录的。
首先当然是要下载一个yii的源码，搭建起来。
第一步将bui的样式迁移到yii的样式目录中去
这里我在样式外面加了一个bui的文件夹，表示这个文件夹中存放的是bui相关的样式，以免重复。
然后创建一个控制器，正常编写。
<?php
namespace app\controllers; use Yii;
use yii\web\Controller;class IndexController extends Controller{
public $layout = false; //注意，如果不需要使用yii自带的样式，首先就要加载这条，当然如果你需要每个页面都不要加载yii自带样式，可以将这条写入controller中。这样所有继承的controller就都不会加载yii的样式了
public $enableCsrfValidation = false;//当页面使用ajax来进行获取数据时，如果不定义这个参数，将会报错，功能： ajax限制重复提交
public function actionIndex(){
return $this->render('index');
}
public function actionGetdata(){
//这个方法是获取数据的，根据需求查询，返回值是json格式
}
创建页面
<!DOCTYPE HTML>
<html>
<head>
<title> demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="<?= yii::$app->params['baseurl'];?>/css/dpl-min.css" rel="stylesheet" type="text/css" />
<link href="<?= yii::$app->params['baseurl'];?>/css/bui-min.css" rel="stylesheet" type="text/css" />
<link href="<?= yii::$app->params['baseurl'];?>/css/page-min.css" rel="stylesheet" type="text/css" /> </head>
<body> <div class="container">
<div class="row">
<form id="searchForm" class="form-horizontal span24">
<div class="row">
<div class="control-group span8">
<label class="control-label">用户名称：</label>
<div class="controls">
<input type="text" class="control-text" name="id" id="inputString"> </div>
</div>
<div class="control-group span8">
<label class="control-label">手机号：</label>
<div class="controls">
<input type="text" class="control-text" name="mobile">
</div>
</div>
<div class="control-group span8">
<label class="control-label">用户昵称：</label>
<div class="controls">
<input type="text" class="control-text" name="nickname">
</div>
</div>
<div class="control-group span8">
<label class="control-label">管理区域：</label>;
<div class="controls" >
<select id="" name="area">
<option value="">请选择</option>
<?php foreach($areadata as $v){?>
<option value="<?php echo $v['bmaid']?>"><?php echo $v['aredesc'];?></option>
<?php }?>
</select>
</div>
</div> <div class="span3 offset2">
<button type="button" id="btnSearch" class="button button-primary">搜索</button>
</div>
</div>
<div class="row"> </div>
</form>
</div>
<div class="search-grid-container">
<div id="grid"></div>
</div>
</div>
<script type="text/javascript" src="<?= yii::$app->params['baseurl'];?>/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="<?= yii::$app->params['baseurl'];?>/js/bui.js"></script> <script type="text/javascript" src="<?= yii::$app->params['baseurl'];?>/js/config.js"></script> <script type="text/javascript">
BUI.use('common/page');
</script>
<script type="text/javascript">
BUI.use(['common/search','bui/overlay'],function (Search,Overlay) {
columns = [
{title:'序号',dataIndex:'id',width:80,renderer:function(v){
return Search.createLink({
id : 'detail' + v,
title : '用户信息',
text : v,
href : 'detail/example.html'
});
}},
{title:'用户名称',dataIndex:'uname',width:100},
{title:'用户昵称',dataIndex:'realname',width:100},
{title:'手机号',dataIndex:'mobile',width:80},
{title:'管理区域',dataIndex:'bmaid',width:100},
{title:'注册时间',dataIndex:'regtime',width:300},
{title:'操作',dataIndex:'',width:200,renderer : function(value,obj){
var editStr = Search.createLink({ //链接使用 此方式
id : 'edit' + obj.id,
title : '编辑学生信息',
text : '编辑',
href : 'search/edit.html'
}),
delStr = '<span class="grid-command btn-del" title="删除学生信息">删除</span>';//页面操作不需要使用Search.createLink
return editStr + delStr;
}}
],
//这里是通过url来获取控制器中的json返回数据，pagesize是每页的个数，params：['pageindex'] 这个表示增加一个字段，get方式，可以在控制器中获取它
store = Search.createStore('/index.php?r=Index/getdata',{pageSize:15,params :['pageindex']}),
gridCfg = Search.createGridCfg(columns,{
tbar : {
items : [
{text : '<i class="icon-plus"></i>新建',btnCls : 'button button-small',handler:function(){alert('新建');}},
{text : '<i class="icon-edit"></i>编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
{text : '<i class="icon-remove"></i>删除',btnCls : 'button button-small',handler : delFunction}
]
},
plugins : [BUI.Grid.Plugins.CheckSelection] // 插件形式引入多选表格
}); var search = new Search({
store : store,
gridCfg : gridCfg
}),
grid = search.get('grid');
//删除操作
function delFunction(){
var selections = grid.getSelection();
delItems(selections);
} function delItems(items){
var ids = [];
BUI.each(items,function(item){
ids.push(item.id);
}); if(ids.length){
BUI.Message.Confirm('确认要删除选中的记录么？',function(){
$.ajax({
url : '../data/del.php',
dataType : 'json',
data : {ids : ids},
success : function(data){
if(data.success){ //删除成功
search.load();
}else{ //删除失败
BUI.Message.Alert('删除失败！');
}
}
});
},'question');
}
} //监听事件，删除一条记录
grid.on('cellclick',function(ev){
var sender = $(ev.domTarget); //点击的Dom
if(sender.hasClass('btn-del')){
var record = ev.record;
delItems([record]);
}
});
}); </script> <body>
</html>
bui前端框架+yii整理的更多相关文章
- Web前端，HTML5开发，前端资源，前端网址，前端博客，前端框架整理 - 转改
Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...
- 前端框架MVVM是什么（整理）
前端框架MVVM是什么(整理) 一.总结 一句话总结:vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定. 1.我大前端应该不应该做复杂的数 ...
- 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例
你所不知道的 CSS 阴影技巧与细节 关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow ...
- Web前端框架学习成本比较及学习方法
就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...
- 整合X-Admin前端框架改造ABP
“站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...
- [web前端] 去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？
原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是 ...
- (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]
https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...
- 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言，比如TypeScript
常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
随机推荐
- MacBook Air 装win10系统 by DODUI
为了给齐哥更完美的体验Windows10系统,DODUI亲手操刀MacBook双系统安装Win10,双系统安装教程如下: 终于遇到各种奇葩问题,给小伙伴分享一下. 双系统安装Win10准备工具: 1. ...
- 微信小程序弹出操作菜单
微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A' ...
- centos安装make
CentOS 中无法使用make,make install 命令 提示错误:make: command not found make是gcc的编译器,一定要安装 1.安装: yum -y instal ...
- arcengine导出复本
参考: https://gis.stackexchange.com/questions/172315/creating-checkout-replica-in-arcobjects-from-arcs ...
- vlan分类简易解释
注:出自http://wushank.blog.51cto.com/3489095/1305510 收报文: Acess端口1.收到一个报文,判断是否有VLAN信息:如果没有则打上端口的PVID,并进 ...
- c++ 第一次实验
实验内容: 2-28:实现一个简单的菜单程序,运行时显示“Menu:A(dd) D(elete) S(ort) Q(uit),Selete one:”提示用户输入.A表示增加,D表示删除, S表示排序 ...
- linux软件安装方式
先插句题外话,快捷键 Ctrl+s 的功能是停止输入,Ctrl+q 恢复输入; 正题,在linux的应用软件安装有三种: 1,tar包 2,rpm包 3,dpkg包 以下介绍三种包的安装和卸载方式 1 ...
- .NET Core 事件总线,分布式事务解决方案：CAP 基于Kafka
背景 相信前面几篇关于微服务的文章也介绍了那么多了,在构建微服务的过程中确实需要这么一个东西,即便不是在构建微服务,那么在构建分布式应用的过程中也会遇到分布式事务的问题,那么 CAP 就是在这样的背景 ...
- DS18B20初上电显示85℃问题
以前用的温度采集都是用的AD,这次改为了DS18B20,看了资料,没有很复杂的部分,重要的就是时序.板子出来后初步测试也能正常读取温度,然而有个问题比较奇怪,就是在板子初上电时读取温度总是显示为+85 ...
- 使用 acme.sh 签发续签 Let‘s Encrypt 证书 泛域名证书
1. 安装 acme.sh 安装很简单, 一个命令: curl https://get.acme.sh | sh 并创建 一个 bash 的 alias, 方便你的使用 alias acme.sh=~ ...