layui

浪淘沙1年前前端580
//第一个实例
  table.render({
      elem: '#xxt-tbl'
      , height: 550
      , url: ajaxurl //数据接口
      , method: 'POST'
      , request: {
          pageName: 'PageIndex', // page
          limitName: 'PageSize'// limit

      }
      , toolbar: '#xxt-bar'
      , defaultToolbar: ['filter',
          {
              title: '导出全部Excel',
              layEvent: 'Excel_Allout',
              icon: 'layui-icon-export'
          }

          , 'print']
      , page: {
          limit: 10//分页显示数据
          , limits: [5, 10, 20, 50, 100]
          , curr: @Model.pageindex
                      } //开启分页

      , where: {}
      , even: true
      , page: true // 开启分页
      , response: {
          statusCode: 200 // 重新规定成功的状态码为 200,table 组件默认为 0
      }
      , parseData: function (res) { //res 即为原始返回的数据

          var code = res.statusCode;
          var count = res.totaldata;
          var data = res.data;
          //JSON.stringify(res)
          return {
              "code": res.statusCode, //解析接口状态
              "msg": '', //解析提示文本
              "count": count, //解析数据长度
              "data": data //解析数据列表

          };
      }
      // , loading: true
      , pagebar: '#xxt-pagebar'// 分页栏模板
      , cols: [[ //表头
          {
              field: 'index', title: '序号', width: 100, fixed: 'left', type: 'numbers'
          }
          , { field: 'ProjectId', title: '省份', width: 100, templet: '#ID-table-sf' }
          , { field: 'SchoolId', title: '学校', width: 120, templet: '#ID-table-school' }
          , {
              field: 'GradeId', title: '年级', width: 80, templet: function (d) {
                  switch (d.GradeId) { 
                      case "9":
                          return "初三";
                          break;
                      case "10":
                          return "高一";
                          break;
                      case "11":
                          return "高二";
                          break;
                      case "12":
                          return "高三";
                          break;
                  }
              }
          }
          , { field: 'ClassId', title: '班级', width: 50, templet: '#ID-table-class' }
          , { field: 'StudentName', title: '姓名', width: 100 }
          , { field: 'StudentTel', title: '电话', width: 120 }
          , { field: 'id', title: '购买产品', width: 150 }
          , {
              field: 'PayType', title: '支付类型', width: 100, templet: function (d) {
                  switch (d.PayType) {
                      case "0":
                          return "支付宝";
                          break;
                      case "1":
                          return "微信";
                          break;
                 
                  }
              }
          }
          , { field: 'OutTradeNo', title: '订单号', width: 150 }
          , { field: 'TotalAmount', title: '总金额', width: 100 }
          , { field: 'CreateDate', title: '下单时间', width: 180 }
          , {
              field: 'TradeStatus', title: '状态', width: 100,  templet: function (d) {
                  switch (d.TradeStatus) {
                      case "1000":
                          return "预付款";
                          break;
                      case "1010":
                          return "交易成功";
                          break;
                      case "1020":
                          return "交易失败";
                          break;
                      case "1030":
                          return "交易结束不可退款";
                          break;
                      case "1040":
                          return "全额退款";
                          break;
                      case "1050":
                          return "部分退款";
                          break;

                  }
              }
          }
          , { field: 'ProjectId', title: '归属', width: 100, templet: '#ID-table-owner' }


      ]]

  });


 <div class="layui-tab layui-tab-brief">
     <ul class="layui-tab-title">
         <li class="layui-this"><a href="tj_yj">支付明细</a></li>
         <li><a href="tj_yj_xx">学校支付排名</a></li>

     </ul>
 </div>

//转换成json
   var data = JSON.parse(res.data);



-- select change
 <select name="SchoolId" id="SchoolId" lay-filter="SchoolIdChange">
 form.on('select(SchoolIdChange)', function (data) {          
     var val = data.value;
     window.location = '?fst=@Request.Query["fst"]&SchoolId=' + val;
 });


相关文章

vxe-table 改变每一列颜色值

<div id="app">     <div class="table-responsi...

layui select 下拉被裁切 滚动显示不全的bug修复方案

<style>     .layui-form-select {      &nbs...

layui asp.net core razor集大成应用

layui asp.net core razor集大成应用

@page @model xxtsoft.Web.Entry.Pages.sysadmins.kh.kh_pjbModel @{     Lay...

layui 弹出页面,并且页面保留不变,不跳回头部

 <td>【<a href="#" onclick="return false;" &nbs...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。