这个是做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整理的更多相关文章

  1. Web前端，HTML5开发，前端资源，前端网址，前端博客，前端框架整理 - 转改

    Web前端/H5开发,前端资源,前端网址,前端博客,前端框架整理 综合类 前端知识体系 前端知识结构 Web前端开发大系概览 Web前端开发大系概览-中文版 Web Front-end Stack v ...

  2. 前端框架MVVM是什么（整理）

    前端框架MVVM是什么(整理) 一.总结 一句话总结:vm层(视图模型层)通过接口从后台m层(model层)请求数据,vm层继而和v(view层)实现数据的双向绑定. 1.我大前端应该不应该做复杂的数 ...

  3. 你所不知道的 CSS 阴影技巧与细节 滚动视差？CSS 不在话下 神奇的选择器 :focus-within 当角色转换为面试官之后 NPOI 教程 - 3.2 打印相关设置 前端XSS相关整理 委托入门案例

    你所不知道的 CSS 阴影技巧与细节   关于 CSS 阴影,之前已经有写过一篇,box-shadow 与 filter:drop-shadow 详解及奇技淫巧,介绍了一些关于 box-shadow  ...

  4. Web前端框架学习成本比较及学习方法

    就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理 ...

  5. 整合X-Admin前端框架改造ABP

    “站在巨人的肩膀上”,这样一来,不要万事亲恭,在值得的方向上节约时间,毕竟人生就这么一次.在接触ABP以来,一直想花点时间整合LayUI前端框架到ABP中,进而能够逐渐打磨出一套适合自己的框架,开发习 ...

  6. [web前端] 去哪儿网前端架构师司徒正美：如何挑选适合的前端框架？

    原文地址: https://www.jianshu.com/p/6327d4280e3b 最近几年,前端技术迅猛发展,差不多每年都会冒出一款主流的框架. 每次新开业务线或启动新项目时,首先第一件事就是 ...

  7. (转)2018几大主流的UI/JS框架——前端框架 [Vue.js(目前市场上的主流)]

    https://blog.csdn.net/hu_belif/article/details/81258961 2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web ...

  8. 0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言，比如TypeScript

    常用知识点,技巧 添加库到本地: (举例 element-ui) 用npm命令行把包下载到本地 在电脑里找到资源文件,比如 C:\Users\XiaoCong\AppData\Roaming\npm\ ...

  9. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

随机推荐

  1. vue源码阅读（一）

    版本:2.5.17-beta.0 核心模块(src/core):包括组件.全局API.vue实例.对象属性监测系统.公共方法.虚拟dom.配置等模块 src/core/index.js import ...

  2. 使用Dubbo的SPI扩展机制实现自定义LoadBalance——方法二 不改源码添加META-INF/dubbo元数据

    一.官网提供的方法 参考官网 http://dubbo.apache.org/zh-cn/docs/dev/impls/load-balance.html 二.方法总结 在工程中创建类并实现LoadB ...

  3. Linux命令 file

    查看文件类型:

  4. Autofac之类型注册

    本次主要学习一下Autofac中实现类型注册的几种方式,这里并不打算一开始就从基于接口开发的服务关联切入,而是先从一个简单的类型注册来学起,虽然实际开发中可能不会这么做,但是个人感觉从这里学起理解能能 ...

  5. qs.stringify和JSON.stringify()

    var a = {name:'hehe',age:10}; qs.stringify(a) // 'name=hehe&age=10' JSON.stringify(a) // '{" ...

  6. 【托业】【全真题库】TEST3-语法题

    101. sales representative 销售代表 keep one's promise with 遵守对……的诺言,信守对……的承诺 107. express interest in 表现 ...

  7. btcpool之JobMaker

    一.简介 JobMaker从kafka消息队列接收rawgbt消息,然后解码该消息中的gbt数据,生成Job,发送到kafka消息队列. 二.StratumJob结构 StratumJob结构是Job ...

  8. 20175211 2017-2018-2 《Java程序设计》第六周学习记录

    目录 7.1 内部类 7.2 匿名类 7.3 异常类 断言 参考资料 <Java 2实用教程>第七章 内部类和异常类 7.1 内部类 内部类的外嵌类的成员变量在内部类中依然有效,内部类中的 ...

  9. Java bean 转 Map

    Java bean 转 Map 时需要使用Fastjson //方法 一 Map<String, Object> a = (Map<String, Object>)JSON.t ...

  10. PyCharm：no module named * 解决方法

    1.成功安装模块,无法导入 今天安装完模块pyppeteer,pycharm导入失败,从python的Lib下可以清楚的看到已经安装成功 2.添加当前python环境,不使用默认项目的环境 file& ...