用ECShop 源生JS快速开发后台

阅读更多

一、前端

用ECSHOP后台源生JS来开发管理后台是非常快速的,我们可以参考源生的 ECShop\admin\templates\users_list.htm 文件,后台管理列表主要用到这两个JS文件。

 

ECShop\js\utils.js

ECShop\admin\js\listtable.js

 

所以需要在模板加入这段代码

{insert_scripts files="../js/utils.js,listtable.js"}

如图,引入JS文件后,就能对表格里的数据进行排序

 
用ECShop 源生JS快速开发后台_第1张图片
 

还能直接对表格的数据进行编辑


用ECShop 源生JS快速开发后台_第2张图片

 

分页功能则更简单,在页面加入以下代码即可

listTable.recordCount = {$record_count};
listTable.pageCount = {$page_count};

{foreach from=$filter item=item key=key}
listTable.filter.{$key} = '{$item}';
{/foreach}

 实现分两个步骤,如下图:
 
用ECShop 源生JS快速开发后台_第3张图片
 

二、后端

当然,后台PHP文件也要有对应格式的代码。我们查看 ECShop\admin\users.php  文件。

实现分页功能,要传递以下参数,在初始化时,$full_page 参数要等于 1。

 
用ECShop 源生JS快速开发后台_第4张图片
 而在点击分页调用的接口,$full_page 则默认为空。

 
用ECShop 源生JS快速开发后台_第5张图片
 接下来我们看下表格排序功能的实现


用ECShop 源生JS快速开发后台_第6张图片
 
用ECShop 源生JS快速开发后台_第7张图片
 我们再来看下,表格的编辑后台是怎么实现的。打开文件 ECShop\admin\goods.php 

 
用ECShop 源生JS快速开发后台_第8张图片
 用ECShop 源生JS实现列表分页、排序、编辑和删除就是这么简单。

更多详细内容:ECSHOP 如何开发一个模块后台管理

  • 用ECShop 源生JS快速开发后台_第9张图片
  • 大小: 344.5 KB
  • 用ECShop 源生JS快速开发后台_第10张图片
  • 大小: 249.7 KB
  • 用ECShop 源生JS快速开发后台_第11张图片
  • 大小: 99.8 KB
  • 用ECShop 源生JS快速开发后台_第12张图片
  • 大小: 73.1 KB
  • 用ECShop 源生JS快速开发后台_第13张图片
  • 大小: 74.1 KB
  • 用ECShop 源生JS快速开发后台_第14张图片
  • 大小: 137.4 KB
  • 用ECShop 源生JS快速开发后台_第15张图片
  • 大小: 99 KB
  • 用ECShop 源生JS快速开发后台_第16张图片
  • 大小: 70.7 KB
  • 查看图片附件

你可能感兴趣的:(ECShop)