前端 - FunAdmin框架文档 - FunAdmin开发文档 - ThinkPHP官方手册

前端

AI开发工具

FunAdmin7.X版本全新发布Star一下吧

ThinkPHP文档官网地址

<h2 id="h2--js"><a name="前端JS" class="reference-link"></a><span class="header-link octicon octicon-link"></span>前端JS</h2><ul>
<li><p>一个控制器对应一个 js  js 名为控制器名的全小写， 每个js 的方法对应控制器里的方法， 函数名和控制器方法名一致并小写</p>
</li><li><p>js 默认是生产模式 如果需要开启开发模式 ；可以在后台系统/配置中设置 app_debug 为 1 </p>
</li><li><p>生产模式系統后台的js默认加载的是<code>require-backend.min.js</code>  前台的是<code>require-frontend.min.js</code> </p>
</li><li><p><code>（require-table.js， fun.js， require-form.js ，require-fu.js， require-upload.js ）</code>这些js 已经压缩到min.js 中了，从而减少系统压力</p>
</li><li><p>开发模式后台默认加载的是 <code>require-backend.js</code> 其中这个js会自动加载 譬如 <code>require-table.js ,fun.js ,require-form.js ,require-fu.js, require-upload.js</code> 等</p>
</li><li><p>打包js 进入static 目录 并使用 <code>node r.js -o backend-build.js</code>命令打包后端js 加快浏览速度</p>
</li></ul>
<p>-<code>node r.js -o frontend-build.js</code>  打包前台js</p>
<h2 id="h2-js-"><a name="JS示例" class="reference-link"></a><span class="header-link octicon octicon-link"></span>JS示例</h2><pre><code>define(['jquery','table','form'], function ($,Table,Form) {
    let Controller = {
        index: function () {
            Table.init = {
                table_elem: 'list',
                tableId: 'list',
                requests: {
                    modify_url: 'member/modify',  // 请求地址
                    index_url: 'member/index',
                    delete_url: 'member/delete',
                    // add_url: 'member/add',
                    // edit_url: 'member/edit',
                    //下面两个为自定义按钮样式
                    add_full:{
                        type: 'open',//打开弹窗
                        class: 'layui-btn-sm layui-btn-green',//样式，见layui
                        url: 'member.member/add' +location.search,  // 获取当前url?后面的数据 
                        icon: 'layui-icon layui-icon-add',//图标，见layuiicon
                        text: __('Add'),
                        title: __('Add'),//标题及按钮文字
                       // full: 1,
                        width:800,//窗口的大小
                        height:800,
                        extend:'',      // 弹窗按钮可以这样写 extend:"data-btn='false'",//默认不写是‘submit,close’,参数有：submit(只显示提交),close(只显示关闭),false(不显示按钮)

},
                    edit_full:{
                        type: 'open',
                        event:"open"
                        class: 'layui-btn-xs layui-btn-green',
                        url: 'member.member/edit',
                        icon: 'layui-icon layui-icon-edit',
                        text: __('Edit'),
                        title: __('Edit'),
                        // full: 1,
                        width:'1200',
                        height:'800',
                        extend:"",  //或者object 
                        callback:function (obj) {// v3.3.0 新增 当type 或event 不为 open iframe request 等时会自动调用这个函数，可以在这里面写js
                            console.log(obj);
                        }

},
                },
            };
            Table.render({
                elem: '#' + Table.init.table_elem,
                id: Table.init.tableId,
                url: Fun.url(Table.init.requests.index_url),
                init: Table.init,
                primaryKey: 'id',//主键
                searchName :'id' ,//搜索的名字 默认不写是ID  
                search:true,  //是否开启搜索 //默认true
                searchFormTpl:'模板id',//是否开启模板表单搜索，默认false, 1.5.0新增
                searchShow:false, //默认不显示搜索表单,true 
                searchInput:true, //默认显示搜索框
                rowDouble:true, //双击事件
                totalRow: false,  //汇总行,默认关闭，汇总字段加 totalRow:true 属性
                toolbar: ['refresh','add_full','delete'],  //toolbar 栏
                cols: [[
                    {checkbox: true,},
                    {field: 'id', title: 'ID', width: 80, sort: true},//field：字段，title：列表标题，sort：排序
                    {field: 'username', title: __('membername'), width: 120,},
                    {field: 'email', title: __('Email'), width: 120,},
                    {field: 'mobile', title: __('mobile'), width: 120,edit: 'text'},
                    {
                        field: 'sex',
                        title: __('Sex'),
                        filter: 'sex',
                        width: 120,
                        search: 'select',  //搜索栏里面为：下拉框组件，区间为：between
                        selectList: {0: __('Secret'), 1: __('Male'), 2: __('Female')},  //搜索栏下拉框里面的选项
                        templet: Table.templet.select,  //下拉框模板解析
                        tips: __('Female')+'|'+  __('Male'),  //表格的内容转换
                    },
                    {
                        field: 'memberLevel.name',
                        title: __('MemberLevel'),
                        width: 120,
                        templet: Table.templet.resolution,  //解析关联模型字段
                    },
                    {field: 'avatar', title: __('Avatar'), width: 120, templet: Table.templet.image},
                    {
                        field: 'status',
                        title: __('Status'),
                        width: 120,
                        search: 'select',
                        selectList: {0: __('Disabled'), 1: __('Enabled')},
                        url:'url地址',//2.2新增 当selectList 为空时可设置url 获取后端url数据
                        tips:__('Enabled')+'|'+__('Disabled'),//开关字段自定义显示文字
                        filter: 'status',
                        templet: Table.templet.switch
                    },
                    {field: 'create_time', title: __('Registertime'), width: 180,search:'range'},//创建时间，时间范围搜索框
                    {field: 'last_login', title: __('Lastlogintime'), width: 180,search:'timerange', templet: Table.templet.time},
                    {
                        minwidth: 250,
                        align: 'center',
                        title: __('Operat'),
                        init: Table.init,
                        templet: Table.templet.operat,        //操作方法模板解析
                        operat: ['edit_full', 'delete',
                         //     {
                        //         type: 'open',
                        //         event: 'open',
                        //         class: 'layui-btn-xs layui-btn-green',
                        //         url: 'member.member/edit',
                        //         icon: 'layui-icon layui-icon-edit',
                        //         text: __('Edit'),
                        //         title: __('Edit'),
                        //         // full: 1,
                        //         width:'800',
                        //         height:'600',
                        //         extend:'',
                        //         // btn:'close',
                        //         callback:function (data) { //回调函数
                        //         console.log(data);
                        //     }
                        // } //使用方法三

],      //操作按钮
                    }
                ]],
                limits: [10, 15, 20, 25, 50, 100],
                limit: 15,  //默认行数
                page: true, //开启多页
            });
            Table.api.bindEvent(Table.init.tableId);
        },
        add:function () {
            Controller.api.bindevent()
        },
        edit:function () {
            Controller.api.bindevent()
        },
        api: {
            bindevent: function () {
                Form.api.bindEvent($('form'))  //监听表单事件
            }
        }

};
    return Controller;
});
</code></pre><h2 id="h2-requests-"><a name="requests参数" class="reference-link"></a><span class="header-link octicon octicon-link"></span>requests参数</h2><ul>
<li><p>默认参数只包含 _url 地址</p>
<ul>
<li><code>index_url add_url destroy_url delete_url edit_url modiry_url，export_url</code></li></ul>
</li></ul>
<ul>
<li><p>其他url为自定义</p>
<pre><code>add_full: {type: 'open',  //事件   open  request  delete  destroy 等
      class: 'layui-btn-sm layui-btn-green',  //layui类
      url: 'member.member/add', //地址
      icon: 'layui-icon layui-icon-add' ,  //图标
      text: __('Add'),  // 文字信息
      title: __('Add'), //标题
     // full: 1, //是否全屏打开 默认没有
      width:800,//宽
      height:800// 高
      node:true, 是否验证节点。默认为true
      extend:    扩展参数 一般为 字符串 或者json 
      }
</code></pre></li></ul>
<h2 id="h2-cols-"><a name="cols参数" class="reference-link"></a><span class="header-link octicon octicon-link"></span>cols参数</h2><ul>
<li><p>cols字段属性列表</p>
<ul>
<li><p>class: class 类属性</p>
</li><li><p>field：对应返回的数据列</p>
</li><li><p>filter filter属性</p>
</li><li><p>url 当需要远程获取的数据时 用于模板  select tags  selects 等</p>
</li><li><p>saveurl 当需要保存到后端时的url  selects  switch 等</p>
</li><li><p>title：表格标题</p>
</li><li><p>align：对齐方式</p>
</li><li><p>sort：是否排序字段，默认值不显示排序按钮</p>
</li><li>width:表格列宽度</li><li>minWidth：列最小宽度，设置width后不生效</li><li>selectList：搜索表单里面的下拉选项</li><li>tips：开关字段显示的文本，格式：tips:<strong>(‘Enabled’)+’|’+</strong>(‘Disabled’)</li><li>edit：编辑字段，修改需要再后台接收此字段更新 </li><li>totalRowText：开启汇总属性后的汇总行文本</li><li>totalRow：是否开启该列的自动合计功能，默认：false</li><li>fixed：固定列，可选值有：<em>left</em>、<em>right</em>，该列必须设置在最左（left）、最右(right)</li><li>search：搜索表单字段的格式：<code>between：区间搜索、not between：不在区间内、timerange： 时间范围、select：下拉框,xmSelect 、range：普通时间范围、time：日期时间，不显示在搜索表单直接设置 **search:false,**</code></li><li>templet：模板解析，见JS 模板 - 模板解析</li><li>operat：操作选项，模板解析为：templet: Table.templet.operat 时生效</li><li>searchOp 设置搜索条件  默认<code>%*%</code></li><li>searchTip   搜索placeholder</li><li>searchValue 默认搜索值</li><li>searchValue 默认搜索值</li><li>timepickerformat    timepicker 搜索表单日期范围格式  默认 <code>YYYYMMDDHHmmss</code>注意此处实际应为用 ‘-’ 和：分开</li><li>searchdateformat  搜索表单日期格式   默认 <code>yyyyMMDDHHmmss</code> 注意此处实际应为用 ‘-’ 和：分开</li><li>dateformat 日期值格式化   默认 <code>yyyyMMDDHHmmss</code>  注意此处实际应为用 ‘-’ 和：分开</li><li>extend 扩展属性`</li></ul>
</li></ul>
<ul>
<li><p>默认  比如 ：</p>
<pre><code> {field: 'username', title: __('membername'), width: 120,},
</code></pre></li><li><p>开关</p>
<pre><code>  {
      field: 'status',
      title: __('Status'),
      width: 120,
      search: 'select', //搜索类型
      selectList: {0: __('Disabled'), 1: __('Enabled')}, //搜索表单下拉选项
      tips:"是|否",   //开关显示文本 ，默认设为selectList 
      filter: 'status', //fiter
      templet: Table.templet.switch  //模板解析，其它解析见下方
  },
</code></pre></li><li><p>时间选择  search  可选</p>
<ul>
<li><p><code>timerage</code>  时间范围timepicker    <code>range</code> 普通时间范围   <code>time</code> 日期时间</p>
<pre><code>  {
  field: 'last_login',
  title: __('Lastlogintime'), 
  width: 180,
  search:'timerange', 
  templet: Table.templet.time},
</code></pre></li></ul>
</li></ul>
<ul>
<li><p>关联查询时用到字段解析 字段直接写 关联模型字段<code>memberLevel.name</code></p>
<ul>
<li><p>模板选择 <code>Table.templet.resolution</code></p>
<pre><code>{
      field: 'memberLevel.name',
      title: __('MemberLevel'),
      width: 120,
      templet: Table.templet.resolution
},
</code></pre></li></ul>
</li></ul>
<h2 id="h2-u6A21u677Fu89E3u6790"><a name="模板解析" class="reference-link"></a><span class="header-link octicon octicon-link"></span>模板解析</h2><ul>
<li><code>Table.templet.resolution</code>  //解析关联模型字段</li><li><code>Table.templet.image</code>     //图片/多图片</li><li><code>Table.templet.content</code>  内容</li><li><code>Table.templet.text</code>  text</li><li><code>Table.templet.number</code>  number</li><li><code>Table.templet.icon</code>  图标</li><li><code>Table.templet.url</code>  url地址</li><li><code>Table.templet.switch</code> 开关</li><li><code>Table.templet.time</code>  日期时间格式化</li><li><code>Table.templet.select</code>  select 显示一个</li><li><code>Table.templet.selects</code>  select 下拉框</li><li><code>Table.templet.iframe</code>  iframe  iframe事件</li><li><code>Table.templet.open</code>  open 事件</li><li><code>Table.templet.tags</code>  tag 标签</li><li><code>Table.templet.dropdown</code>  dropdown 事件</li><li><code>Table.templet.operat</code>  operat </li></ul>
<p>格式样板：</p>
<pre><code>{ field: 'id', title: __('ID'), },
{
field: 'status',
search: 'select',
title: __('Status'),
filter: 'status',
tips: __('enabled') + '|' + __('disabled'),
selectList: {0: __('Disabled'), 1: __('Enabled')},
sort: true,
templet: Table.templet.switch,
width: 100
},
{field:'create_time', title: __('CreateTime'),align: 'center',sort:'sort',width: 170,search: 'timerage',},
{
fixed:right,
width: 180,
align: "center",
title: __("Operat"),
init: Table.init,
templet: Table.templet.operat,
operat: ["edit","destroy","delete"]
},
</code></pre><h2 id="h2-u5176u4ED6"><a name="其他" class="reference-link"></a><span class="header-link octicon octicon-link"></span>其他</h2><pre><code>Form.api.bindEvent($('form'))  //监听表单事件
监听表单事件，可以不用此公共函数,自己二次开发
</code></pre><h2 id="h2-u524Du7AEFu6743u9650u9A8Cu8BC1"><a name="前端权限验证" class="reference-link"></a><span class="header-link octicon octicon-link"></span>前端权限验证</h2><ul>
<li><p>比如按钮需要设置权限 </p>
<pre><code>  <button class="layui-btn layui-btn-sm layui-btn-sm layui-btn-green  {if !auth(__u('member.member/add')}layui-hide{/if}"
  data-width="800" data-height="600" data-full="0" data-resize="0"
  lay-event="open" data-url="member.member/add"
  title="添加"><i class="layui-icon layui-icon-add"></i>添加</button >
  ~~~

或者
  ~~~
  {if auth(__u('member.member/add'))}
  <button class="layui-btn layui-btn-sm layui-btn-sm layui-btn-green"
  data-width="800" data-height="600" data-full="0" data-resize="0"
  lay-event="open" data-url="member.member/add"
  title="添加"><i class="layui-icon layui-icon-add"></i>添加</button >
  {/if}
</code></pre></li></ul>
<h2 id="h2-table-"><a name="table事件" class="reference-link"></a><span class="header-link octicon octicon-link"></span>table事件</h2><p>默认的事件有</p>
<pre><code>- open  打开弹窗
- request  请求comfirm
- import 导入事件
- export 导出事件
- delete 销毁
- destroy 删除
- refresh  刷新
- tabswitch 选项卡切换事件
- iframe   v1.2.3 新增  打开新的iframe
- dropdown   v2.6 新增  dropdown
</code></pre><blockquote>
<p>示例</p>
</blockquote>
<pre><code>add_full:{
    type: 'iframe   ',
    class: 'layui-btn-sm layui-btn-green',
    url: 'member.member/add',
    icon: 'layui-icon layui-icon-add',
    text: __('Add'),
    title: __('Add'),
    // full: 1,
    width:'800',
    height:'600',
extend:'',
},
</code></pre><p>也可以自定义事件</p>
<pre><code>edit_full:{
    type: 'demo', //类型不能和上面冲突
    class: 'layui-btn-xs layui-btn-green',
    url: 'member.member/edit',
    icon: 'layui-icon layui-icon-edit',
    text: __('Edit'),
    title: __('Edit'),
    // full: 1,
    width:'800',
    height:'600',
    extend:'data-callback="demo(obj,可以填写参数)"'
},
</code></pre><p>这里自定义的函数要在js 里自己写，会自动调用的</p>
<pre><code>demo = function(obj,可以填写参数){ //参数可填写可不填
    console.log(obj)//当前对象
    console.log(可以填写参数) //参数  可以不填写参数

};
</code></pre><p>表格dropdown事件 重点</p>
<pre><code class="lang-js"> dropdown 请求url 初始化
 Table.init = {
        table_elem: 'list',
        tableId: 'list',
        requests: {
            dropdown:{
                type: 'dropdown',
                event: 'dropdown',
                class: 'layui-btn-xs layui-btn-green',
                url: 'member.member/edit',
                icon: 'layui-icon layui-icon-edit',
                text: __('Edit'),
                title: __('Edit'),
                // full: 1,
                width:'800',
                height:'600',
                extend:[
                    {
                        title: 'add'
                        ,id: 101
                        ,type: 'qita'//自定义事件
                        ,event: 'qita'
                        ,url: 'member.member/add'
                        ,icon: 'layui-icon layui-icon-edit'
                        ,callback: 'demo'//自定义事件函数  从v3.3版本开始 这里支持函数写入 callback:function(obj,data){}
                    },
                    {
                        title: 'add'
                        ,id: 101
                        ,type: 'open'
                        ,event: 'open'
                        ,url: 'member.member/add'
                        ,icon: 'layui-icon layui-icon-edit'
                    }]
            }
        },
    };
</code></pre>
<pre><code class="lang-js">  操作工具栏 使用dropdown事件

templet: Table.templet.operat,
 operat: ['dropdown'],
</code></pre>
<pre><code class="lang-js"> 匿名函数对应上面的callback:"demo"

demo = function (obj,data){
        console.log(obj) //当前dropdown 下拉的对象
        console.log(data) //当前dropdown 下拉的数据
    }
</code></pre>
<blockquote>
<p>注意 extend 里面可以写对象，也可以是字符串  你可以在里面自定义样式或者其他属性</p>
</blockquote>

最后更新时间：2023-04-19 14:40:15 12336

https://doc.funadmin.com