这个是做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. Python基础之元组和字典

    一.元组: 1.定义: 内存图: 2.基本操作 3.元组作用: 4.元组基础知识代码 # . 创建空元组 t01 = () t02 = tuple() # . 创建具有默认值的元组 t01 = (,, ...

  2. 微信昵称有特殊符号怎么保存到mysql库里？

    微信昵称有特殊符号怎么保存到mysql库里? mysql库怎么保存emoji表情? 这里提供 1 种稳妥有效的方法: // 入库之前,使用 Base64 编码 String nickname = re ...

  3. MySQL 详细学习笔记 转

    Windows服务 -- 启动MySQL net start mysql -- 创建Windows服务 sc create mysql binPath= mysqld_bin_path(注意:等号与值 ...

  4. 在队列中join()与task_done()的关联性

    1.基础解释: Queue.task_done() 在完成一项工作之后,Queue.task_done()函数向任务已经完成的队列发送一个信号 Queue.join() 实际上意味着等到队列为空,再执 ...

  5. Dear ImGUI 使用指南

    文档 1)Dear IMGui 2) 知乎 组件 1) Com 如何设置动态字符串? //char*pTest = "aaaa\0bbbb\0cccc\0dddd\0eeee\0\0&quo ...

  6. ListView添加图片文字项

    1)listview 控件 结合 imagelist 控件 实现类似效果. 2)添加 imagelist 控件 images 属性,点击后面的... 添加相应图片. 3)点listview,查看其属性 ...

  7. win10下配置默认软件（转）

    add by zhj: 以配置默认浏览器为例说明,配置其它程序类似 原文:https://blog.csdn.net/u013246898/article/details/52032567 第一步:在 ...

  8. javascript 的引入

    目录 一.静态引入 1. html标签script引入 2. esm 中import ModuleName from 'module/path' 3. commonjs 中 const ModuleN ...

  9. Jmeter学习之--dubbo接口测试

    背景:公司的h5和APP都需要调用许多非http的服务,需要对服务的性能和自动化测试 工具:IDEA ,maven,Jmeter 参考文档: https://testerhome.com/topics ...

  10. jeecg自定义datagrid查询

    为什么要写这篇文章? 我们了解,使用 jeecg 提供的 CriteriaQuery 查询方式,确实能满足绝大数的需求,但是往往有那么个比较复杂的情况,需要我们直接去写 sql,比如多表查询呀等等等等 ...