昨天想在Layui的数据表格添加一列与ID对应的统计数据，折腾了几个小时，这里做一下记录。
一、多模型Haswhere
最开始我的需求是联查三个表，但是看了TP文档，Hasone只能有一个Haswhere，但是可以有多个with。
也就是可以展示多个绑定的数据，但是有且只能查询其中的两个，其他的不在查询条件内。
后来没办法只有用join来连表实现，代码如下：
|
1 2 3 4 5 6 |
$list = \app\index\model\Expense::alias("a") ->join('Beian b', 'a.beian_id = b.id') ->join('Customer c', 'a.customer_id = c.id') // ->join('expense_in d', 'a.id = d.expense_id','LEFT') ->field('a.id,a.expense_state,b.project_name,b.record_date,c.linkman,c.phone') ->where($where)->order('id desc')->limit($limits)->select(); |
其中注释掉的这行，本来是想拿来做统计，也就是在field中写SUM进行统计。
实际上不行，因为join后，无论LEFT还是RIGHT，都会对最终的数据有影响，这其实也很好想明白。
所以，想在数据接口直接输出统计值，似乎很难，折腾了一会后，放弃了这个尝试。
二、AJAX return返回
数据接口中没有统计数据，我们就需要另外定义模板，也就是在设置LayUI数据表格时，增加templet，如下：
|
1 2 3 4 5 6 7 |
{ field: 'id', title: '结余', align: 'center', templet: sumTpl, sort: true } |
其中的templet: sumTpl，就是我们定义的模板。
注意，定义模板的方法请参考LayUI文档，我是一次成功，所以不清楚失败的情况，但是听说自定义模板位置错误的话，是没有输出的。
我放的位置是LayUI定义主入口模块的下方，数据表格的上方，也就是：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<script> layui.config({ base: '/static/' //静态资源所在路径 }).extend({ index: 'lib/index' //主入口模块 }).use(['index', 'table'], function () { var $ = layui.$, admin = layui.admin, element = layui.element, layer = layui.layer, table = layui.table; element.render(); //统计 var sumTpl = function(c) { $.ajax({ url: '/index/expense/sum_api/', type: 'post', dataType: 'json', data: { id: c.id }, success: function (data) { result = data.sum } }); }; |
最初我是用上面的方式表达，直接AJAX请求，请求的参数是所在行的id值，返回后return。
事实上这事错误的，在ajax方法中不能直接return返回值。
常见的错误写法
* 方式：（1）同步调用 （2）在ajax函数中return值；
* 结果：返回 1。未成功获取返回值；
* 失败原因：ajax内部是一个或多个定义的函数，ajax中return返回值，；
* 返回到ajax定义函数，而不是返回到ajax外层的函数checkAccount1()。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function checkAccount1(){ var result = 1; $.ajax({ url : 'test.do', type : "post", data : {}, async : false, success : function(data) { return 2; } }); return result; } |
* （1）异步调用 （2）在ajax对全局变量进行设值 (3)ajax函数外将变量return；
* 结果：返回 1。未成功获取返回值；
* 失败原因：ajax请求和后面的return result语句异步执行；
* 导致return result比result = 2先执行并返回result的值。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function checkAccount2(){ var result = 1; $.ajax({ url : 'test.do', type : "post", data : {}, async : true, success : function(data) { result = 2; } }); return result; } |
正确的写法
* （1）同步调用 （2）且在ajax对全局变量进行设值 (3)ajax函数外将变量return；
* 结果：返回 2。成功获取返回值；
* 成功原因：先执行result = 2;再往下执行return result。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function checkAccount3(){ var result = 1; $.ajax({ url : 'test.do', type : "post", data : {}, async : false, success : function(data) { result = 2; } }); return result; } |
对我最开始错误写法的修正
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//统计 var sumTpl = function(c) { var result; $.ajax({ url: '/index/expense/sum_api/', async : false, type: 'post', dataType: 'json', data: { id: c.id }, success: function (data) { result = data.sum } }); return '<button type="button" class="layui-btn layui-btn-primary layui-btn-xs">￥'+result+'</button>'; }; |
最终页面效果
原创文章，作者：蓝洛水深，如若转载，请注明出处：https://blog.lanluo.cn/10032
微信扫一扫 
支付宝扫一扫 
