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.createLinkreturn 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); //点击的Domif(sender.hasClass('btn-del')){var record = ev.record;delItems([record]);}});});</script><body>
</html>

转载于:https://www.cnblogs.com/renshi/p/9443359.html

bui前端框架+yii整理相关推荐

Cordova项目IphoneX适配，结合BUI前端框架项目（需要修改原生代码）
先吐槽一下苹果,每年都要出一下幺蛾子,你还没有办法. Hybrid App适配只能说一开始研究难一点,后面基本没什么问题,下面就把我自己的研究出来的跟大家分享一下. 部分参考: 点击打开链接 1.m ...
【VUE】vue前端框架知识整理
VUE.JS学习笔记第一章 vue简介基于VUE框架开发的开源前端项目,这个是我学完后开发的开源实例项目,大家有兴趣的可以一起交流,喜欢的话别忘了star一下哦. 1.1 Vue基本使用 Vue的 ...
BUI前端框架·导航栏
图片 dom中有一个钩子J_Nav来绑定顶部导航的事件有以下几点说明: 导航项:.nav-item可以任意添加删除导航内容中 .nav-起始的样式决定导航项的图标,如:nav-home等 .dl- ...
BUI前端框架·首页代码
整体结构页面声明首页title 登录信息顶部导航二级菜单 tab 首页JS配置项几点说明文档声明为 <!doctype html>,文件格式是utf-8 css文件在 titl ...
面了几家大厂前端开发，整理了55道框架真题（免费领）
金九银十将至,大家准备好跳槽了吗? 近期,教育板块的大动荡大家都有所关注!不提民生教育问题,首当其冲受波及的还有一大批拥有丰富工作经验的务工者,这里就包括很多技术娴熟的IT从业人员. 更多从业者涌入招 ...
2018开发最快的Webapp框架--BUI交互框架
原文地址: https://segmentfault.com/a/1190000012994082 一.案例代表这是你看下去的动力, 我用BUI仿照QQ的手机截图做出来的一个demo, 包含QQ的常 ...
2018开发最快的Webapp框架--BUI交互框架 1
一.案例代表这是你看下去的动力, 我用BUI仿照QQ的手机截图做出来的一个demo, 包含QQ的常见交互, 侧滑边栏,TAB切换,侧滑列表,下拉刷新,下拉菜单,弹窗搜索等交互操作, 这几种操作很多U ...
如何挑选适合的前端框架(去哪儿网前端架构师司徒正美)
前端框架不断推新,众多IT企业都面临着"如何选择框架","是否需要再造轮子"的抉择.去哪儿网前端架构师司徒正美分析了各主流行框架优劣点.适用场景,并针对不同规模 ...
angler前端框架_2019几大主流的前端框架，几款目前最热门的前端框架
如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富. 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,C ...

bui前端框架+yii整理

bui前端框架+yii整理相关推荐

最新文章

热门文章