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. 百度更好阅读,请移步这里聊之前最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

随机推荐

discuz 修改亮剑积分商城2.91模板（在常用设置中添加商场首页排序方式的背景颜色）
在应用 -> 积分商城 -> 常用设置中添加商场首页排序方式的背景颜色修改功能步骤: 1.找到并打开此页面对应的模板source\plugin\aljsc\template\set ...
Spark 实现wordcount
配置完spark之后,使用spark实现wordcount,这一部分完全参考<深入理解Spark:核心思想与源码分析> 依然使用hadoop wordcountTest的那几个txt文件 ...
好大一个坑： EF Core 异步读取大字符串字段比同步慢100多倍
这两天遇到一个奇怪的问题,通过 EF/EF Core 查询数据库速度奇慢,先是在传统的 ASP.NET 项目中遇到(用的是EF6.0),后来将该项目迁移至 ASP.NET Core 也是同样的问题(用 ...
Express全系列教程之(七)：cookie的加密
一.关于cookie加密 cookie加密是让客户端用户无法的值cookie明文信息,是数据安全的重要部分:一般的我们可以在保存cookie时对cookie信息进行加密,或者在res.cookie中对 ...
核心思想：决定你是富人还是穷人的11条标准（有强烈的赚钱意识，这也是他血液里的东西，太精彩了）good
原文地址:决定你是富人还是穷人的11条标准作者:谢仲华 1.自我认知穷人:很少想到如何去赚钱和如何才能赚到钱,认为自己一辈子就该这样,不相信会有什么改变. 富人:骨子里就深信自己生下来不是要做穷人, ...
Linux协议栈-netfilter-conntrack
原文连接:https://blog.csdn.net/jasonchen_gbd/article/details/44874321?utm_source=blogxgwz8
讨论mui 的 mui.init 与 mui.plusReady
先来看一段代码 (function(m, doc) { mui.plusReady(function(){ var self = plus.webview.currentWebview(); olti ...
在python项目中导出项目依赖的模块信息
1.安装pipreqs pip install pipreqs 2.导出requriements.txt文件在windows中,终端切换到项目所在的文件夹下: 运行: pipreqs ./ 如果遇到 ...
FPGA验证之SystemVerilog+UVM
[转载]https://blog.csdn.net/lijiuyangzilsc/article/details/50879545 数字芯片和FPGA的验证.主要是其中的功能仿真和时序仿真. ...
PHP多线程 curl_multi_init 的使用
php中可以通过CURL处理HTTP请求,其中curl_init()是单线程模式,如果需要对事务处理走多线程模式,那么就需要用到curl_multi_init()函数. 本案例用来测试大并发的情况下 ...

bui前端框架+yii整理

bui前端框架+yii整理的更多相关文章

随机推荐

热门专题