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. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
随机推荐
- swust oj 981
统计利用二叉树存储的森林中树的棵数 1000(ms) 10000(kb) 2919 / 5436 普通树及其构成的森林均可转换成相应的二叉树,反之亦然.故而可以根据相应的转换方法去统计某一二叉树对应的 ...
- CentOS / RHEL 7 : How to setup yum repository using locally mounted DVD
1. Mount the RHEL 7 installation media ISO to some directory. For example /mnt : # mount -o loop rhe ...
- css_文本溢出
1.单行文本溢出隐藏,显示省略号 2.多行文本溢出隐藏,显示省略号 1.只针对用webkit内核浏览器渲染页面才会有效果 2.(多行文本溢出隐藏,显示省略号)通用方法
- tomcat体系结构
总体架构解析 Server: 一个StandardServer类实例就表示一个Server容器,TOMCAT启动的时候首先会启动一个Server,一个Server包括多个Service Service ...
- Multi-Projector Based Display Code ---- FAQ
Frequently Asked Question How do I know that my camera has a proper lens? Answer: If you can see exa ...
- js 检查登录态方法封装(闭包、状态缓存)
前端页面开发时,经常需要异步校验登录态,每次都重新copy之前写的方法,比较繁琐不好维护,固将登录态校验封装成一个js. (function(){ //登录状态 1 登录态有效 2 登录态无效 3 请 ...
- 解决 warning I tensorflow/core/platform/cpu_feature_guard.cc:141] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2
只需要加载如下代码: import os os.environ['
- Elasticsearch学习笔记（七）document小结
一.生成document id 1.自动生成document id 自动生成的id,长度为20个字符,URL安全,base64编码,GUID,分布式系统并行生成时不可能 ...
- VUE项目注意点
1.vue组件中img标签的src属性绑定数据: <img :src="img" alt="图片" /> //scriptdata() { img: ...
- ES6的字符串和数值的扩展
字符串扩展 对于处理大于两个字节(大于0xffff)的字符,let str =’\u{20bb7}abc’ ES5中的遍历 for(let i=0;i<str.length;i++){ con ...