基于layui2和thinkphp5项目开发心得记录（一）

写这系列的文章目的无他，仅仅是用以记录自己写项目的一些思路和心得，在开发过程中代码是以实现为首要目的，写得并不会非常美观实用，代码会在后期不断调试更改，文章也会进行不定期更新。未经作者允许请勿转载。

最新更新：2018/7/26

功能需求：选取页面表格信息，批量生成word文件 

相关技术点

• 前端layui表格的数据显示与后台json接口
• 页面与页面之间的参数传递，页面与后台之间的参数传递
• php批量生成word文件（数组循环遍历、字符串与数组转化、js中window.location.search的用法和作用。）
• html样式对word影响
• 浏览器文件下载

首先是用一个layui表格对数据进行展示，html页面写个table标签，给个id

<table class="layui-table"  id="projtb"  lay-filter="filtertb"></table>

 按照layui框架的规则，在JS中对表格的表头值进行规定，field是与数据库对应的字段值，title是表格的表头

layui.use('table', function(){
  var table = layui.table;
  
  //表格列表
  var show_col=[[
            {type:'checkbox', fixed: 'left'}
            ,{field:'id',width:85, sort: 'true',  title: 'ID',style:"font-size:10px;"}
            ,{field:'name',width:180, sort: 'true',  title: '名称',style:"font-size:12px"}
            ,{field:'desc', width:180, sort: 'true' , title: '备注',style:"font-size:12px"}
            ,{field:'is_on_duty' ,width:140,sort: 'true', title: '是否管理',style:"font-size:12px"}
            ,{field:'status', width:94, sort: 'true' , title: '状态',style:"font-size:12px"}
            ,{fixed:'right', width:114, align:'center', toolbar: '#op-bar' , title: '操作',style:"font-size:12px"}
        ]];

  //表格属性
  var options={
    elem: '#projtb'
    ,height: 315
    ,url: ' '     //数据接口
    ,page: true     //开启分页
    ,cols: show_col
  }
 
  //渲染
  table.render(options);
  
});

请求后台接口，对表格数据进行渲染。数据来源都是从服务器上的数据库获取，感觉刚上手thinkphp5框架，对数据库的操作还是蛮顺手的。接口以json形式返回。注意layui表格的接口数据有它自己的默认规则（除非是自己定义返回的数据格式），如果只按照自己后台数据去定义json，会导致页面报错说接口异常，或者表格一片空白。默认接口数据格式以及自定义数据格式的官方文档传送门

/*数据接口*/
    public function getDeptList($keyword = '', $page = 1,$limit=20)
    {
        $map = [];
        if ($keyword) {
            $map['name'] = ['like', "%{$keyword}%"];
        }
        $dept_list_query = $this->dept_model->where($map)->order('id Asc')->paginate($limit, false, ['page' => $page]);
        $dept_list_arr = $dept_list_query->toArray();
        //json数组
        $arr = array();
        $arr['code'] = 0;
        $arr['msg'] = "";
        $arr['count'] = $dept_list_arr['total'];
        $arr['per_page'] = $dept_list_arr['per_page'];
        $arr['current_page'] = $dept_list_arr['current_page'];
        $arr['data'] = $dept_list_arr['data'];
        $arr_json = json($arr);
        return $arr_json;

    }

/* 默认接收的数据格式
    {
      code: 0,
      msg: "",
      count: 1000,
      data: []
    } 
*/

功能的流程大概思路是：选取需要生成word的项目，勾选第一列的复选框，然后点击页面的生成按钮，弹出一个窗口，进行模板选择（因为需求中有三个word模板），选择了模板之后，跳转新的页面，将生成的doc的链接展示出来，供用户点击下载。

流程清楚之后，接下来就是数据问题了，首先要获取到所选取的那些项目的对应id，还有模板选择那个页面的模板id，一起传进后台控制里的生成word的函数。因为在经过了两个前端html页面这些参数才传到后台，所以打算把第一个页面的项目id以数组的形式，利用url传参方式get到第二个模板选择页面，然后在第二个页面利用js中window.location.search获取到第一个页面传过来的项目id，再将项目id和模板id一起传入后台。

那么第一个页面如何获取到项目id呢？利用layui的表格监听，将用户勾选的每一条项目对应的数据存起来。再利用循环，将每条项目的项目id取出来存到一个新的数组，这个数组就是需要传到下一个页面的参数，里面包含了用户勾选到的项目的id，不说那么多，直接上代码。

<!--第一个页面的生成按钮，点击后将打开弹窗（模板选择），并且将项目id传到下弹窗页面-->
<button class="layui-btn layui-btn-mini layui-bg-red" data-type="exportWords">生成文档</button>

    //JS代码
    layui.use(['form', 'layer'], function(){
        var $ = layui.jquery,
                layer = layui.layer,
                table = layui.table;

        //监听表格复选框选择
        table.on('checkbox(filtertb)', function(obj){
            var checkStatus = table.checkStatus('projtb');
            //将用户勾选的项目对应数据存起来
            clicked_project = checkStatus.data;
            //console.log(clicked_project);
        });

        var active = {
            //点击事件绑定
            exportWords:function () {
                //获取勾选的项目id，存入一个新数组，传入生成文档的