zoukankan      html  css  js  c++  java
  • bui前端框架+yii整理

    这个是做bui前端样式整合的时候记录的。

    首先当然是要下载一个yii的源码,搭建起来。

    第一步将bui的样式迁移到yii的样式目录中去

    这里我在样式外面加了一个bui的文件夹,表示这个文件夹中存放的是bui相关的样式,以免重复。

    然后创建一个控制器,正常编写。

    <?php
    namespace appcontrollers;
    
    use Yii;
    use yiiwebController;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',80,renderer:function(v){
                return Search.createLink({
                  id : 'detail' + v,
                  title : '用户信息',
                  text : v,
                  href : 'detail/example.html'
                });
              }},
              {title:'用户名称',dataIndex:'uname',100},
              {title:'用户昵称',dataIndex:'realname',100},
              {title:'手机号',dataIndex:'mobile',80},
              {title:'管理区域',dataIndex:'bmaid',100},
              {title:'注册时间',dataIndex:'regtime',300},
              {title:'操作',dataIndex:'',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>
  • 相关阅读:
    BZOJ2821 作诗(Poetize) 【分块】
    BZOJ2724 蒲公英 【分块】
    Codeforces 17E Palisection 【Manacher】
    BZOJ2565 最长双回文串 【Manacher】
    Codeforces 25E Test 【Hash】
    CODEVS3013 单词背诵 【Hash】【MAP】
    HDU2825 Wireless Password 【AC自动机】【状压DP】
    HDU2896 病毒侵袭 【AC自动机】
    HDU3065 病毒侵袭持续中【AC自动机】
    HDU2222 Keywords Search 【AC自动机】
  • 原文地址:https://www.cnblogs.com/renshi/p/9443359.html
Copyright © 2011-2022 走看看