目录

列表开发实例

1. 功能说明

本文档我们将采用listview列表控件开发一个包含上下拉、滑动删除、新增和修改功能的CURD应用。
在开发之前，请确保项目中引入以下文件：

  1. <link rel="stylesheet" href="css/iuapmobile.um-2.7.0.css">
  2. <link rel="stylesheet" href="css/themify-icons/themify-icons.css">
  3. <script src="js/jquery-2.1.4.min.js"></script>
  4. <script src="js/knockout-2.2.0.js"></script>
  5. <script src="js/Frameworks/iuapmobile.frameworks.ui-2.7.0.js"></script>
  6. <script src="js/Frameworks/ iuapmobile.frameworks.listview-2.7.0.js"></script>

2.实现

2.1 首页添加动态列表

添加首页id后增加导航栏，并添加新增按钮，设置新增按钮id属性为“add”，后面会用到。

  1. <div class="um-header">
  2.     <h3>订单列表</h3>
  3.     <a href="#" id="add" class="ti-plus um-header-right f18"></a>
  4. </div>

在内容区插入listview模板，结构如下，

  1. <div class="um-listview-wrap" id="listview">
  2. 　　<ul class="um-list um-no-active" data-bind="foreach:data">
  3.      　　<li class="um-listview-row">
  4.         　　<a href="#" class="um-list-item um-swipe-action um-no-icon">
  5.            　　　<div class="um-swipe-btns">
  6.                　　　<span class="um-swipe-btn um-delete">删除</span>
  7.           　　　 </div>
  8.              　　<div class="um-list-item-inner">
  9.                    <div class="um-list-item-body" style="padding-right:0">
  10.                      　　<div class="clearfix">
  11.                          　　<div class="um-xs-6 tl um-text-overflow">
  12.                              　　<span class="fb" data-bind="text:company"></span>
  13.                          　　</div>
  14.                          　　<div class="um-xs-6 tr um-text-overflow um-red f20">
  15.                              　　<span  data-bind="text:currency"></span>
  16.                              　　<span  data-bind="text:order_money"></span>
  17.                          　　</div>
  18.                       　　</div>
  19.                       　　<div class="clearfix mt5 f14">
  20.                           　　<div class="um-xs-6 tl um-text-overflow">
  21.                               　　<span data-bind="text:order_id" class="um-gray"></span>
  22.                               　　<span data-bind="text:order_status"></span>
  23.                       　　　　</div>
  24.                           　　<div class="um-xs-6 tr um-text-overflow">
  25.                               　　<span data-bind="text:order_date" class="um-gray"></span>
  26.                           　　</div>
  27.                       　　 </div>
  28.                  　　 </div>
  29.                　</div>
  30.            　</a>
  31.         </li>
  32.   　 </ul>
  33. </div>

与此同时，我们会在文档尾部插入一段初始化控件的ＪＳ片段，如下所示，这段代码中我们已经实现了构造控件实例、Knockout绑定、添加控件方法。

  1. $(function() {
  2.     //构造控件实例
  3.     var listview = UM.listview('#listview');
  4.     //Knockout绑定
  5.    var ViewModel = function(jsonArray) {
  6. };
  8. var jsonArray = [
  9. {'company':'国家电网公司','order_id':'000000000001','order_status':'待审核','order_money':'1,500','currency':'$','order_date':'2015-01-01','delivery_date':'2015-01-02','contact_name':'小明','contact_tel':'130********','if_store':false, 'memo':'记得及时发货'},
  10. {'company':'中国移动通信集团公司','order_id':'000000000002','order_status':'待确认','order_money':'11,000','currency':'$','order_date':'2015-01-01','delivery_date':'2015-01-02','contact_name':'小明','contact_tel':'130********','if_store':false, 'memo':'记得及时发货'},
  11. {'company':'中国人寿保险(集团)公司','order_id':'000000000003','order_status':'已关闭','order_money':'22,100','currency':'$','order_date':'2015-01-01','delivery_date':'2015-01-02','contact_name':'小明','contact_tel':'130********','if_store':false, 'memo':'记得及时发货'},
  12. {'company':'中国电信集团公司','order_id':'000000000004','order_status':'待审核','order_money':'41,100','currency':'$','order_date':'2015-01-01','delivery_date':'2015-01-02','contact_name':'小明','contact_tel':'130********','if_store':false, 'memo':'记得及时发货'},
  13. {'company':'中国华润总公司','order_id':'000000000005','order_status':'待发货','order_money':'30,100','currency':'$','order_date':'2015-01-01','delivery_date':'2015-01-02','contact_name':'小明','contact_tel':'130********','if_store':false, 'memo':'记得及时发货'},
  14. ];
  16. var viewModel = new ViewModel();
  17. viewModel.data = ko.observableArray(jsonArray);
  18. ko.applyBindings(viewModel);
  19. //控件方法及其他代码此处先省略，上下拉刷新和侧滑删除，以及新增和修改列表的代码将在//此处书写
  20. });

至此，我们的列表已经初始化，并且已经用knockout给列表绑定了字段，可以展示数据了，接下来，我们给列表添加上下拉刷新。

2.2 列表上下拉加载数据

承接上节，我们在列表使用Knockout动态绑定数据后，添加以下控件方法，即可实现上下拉加载数据。

  1. listview.on('pullDown', function(sender) {
  2.     //这是可以编写列表下拉加载逻辑，参数sender即为当前列表实例对象
  3.     var row = {
  4.         'company' : '中国兵器装备集团公司',
  5.         'order_id' : '000000000000',
  6.         'order_status' : '待审核',
  7.         'order_money' : '1,500',
  8.         'currency' : '$',
  9.         'order_date' : '2015-01-01',
  10.         'delivery_date' : '2015-01-02',
  11.         'contact_name' : '小明',
  12.         'contact_tel' : '130********',
  13.         'if_store' : false,
  14.         'memo' : '记得及时发货'
  15.     };
  16.     viewModel.data.unshift(row);
  17.     sender.refresh();
  18. });
  19. listview.on('pullUp', function(sender) {
  20.     //这是可以编写列表上拉刷新逻辑，参数sender即为当前列表实例对象
  21.     var row = {
  22.         'company' : '宝钢集团有限公司',
  23.         'order_id' : '000000000006',
  24.         'order_status' : '待审核',
  25.         'order_money' : '2,500',
  26.         'currency' : '$',
  27.         'order_date' : '2015-01-01',
  28.         'delivery_date' : '2015-01-02',
  29.         'contact_name' : '小明',
  30.         'contact_tel' : '130********',
  31.         'if_store' : false,
  32.         'memo' : '记得及时发货'
  33.     };
  34.     viewModel.data.push(row);
  35.     sender.refresh();
  36. });

*注：上面的绿色标注代码为示例代码，可根据需要自己书写

2.3 列表侧滑删除

承接上节，我们在列表支持上下拉加载数据后，添加以下控件方法，即可实现上下拉刷新。

  1. listview.on('itemSwipeLeft', function(sender, args) {
  2.     //这里可以处理行左滑事件，参数sender即为当前列表实例对象，args对象有2个属性，即//rowIndex(行索引)和$target(目标行的jquery对象)
  3.     sender.showItemMenu(args.$target);
  5. });
  6. listview.on('itemDelete', function(sender, args) {
  7.     //这是可以编写行删除逻辑，参数sender即为当前列表实例对象，args对象有2个属性，即//rowIndex(行索引)和$target(目标行的jquery对象)
  8.     args.$target.slideUp(500, function() {
  9.         var item = viewModel.data()[args.rowIndex];
  10.         viewModel.data.remove(item);
  11.     });
  12. });

*注：上面的绿色标注代码为示例代码，可根据需要自己书写

2.4 列表新增和修改条目

本节我们将在之前列表上拉刷新和侧滑删除功能基础上，实现列表新增和修改功能。
由于列表新增和修改功能使用的dom结构类似，我们这里复用同样的DOM结构，只是逻辑稍微有点不同，具体操作如下：

在之前的dom结构基础上，我们在首页的um-page容器后面新建一个空的um-page容器，设置其id属性为”orderRow”,添加导航控件，并添加返回和保存按钮。如下所示，设置保存按钮id属性为”save”:

  1. <div class="um-page" id="orderRow">
  2.     <div class="um-header">
  3.         <a href="#" class="um-back"> 返回</a>
  4.         <h3>订单</h3>
  5.         <a id="save" href="#" class="um-header-right">保存</a>
  6.     </div>
  7.     <div class="um-content">
  8.         <!-- 内容区 -->
  9.     </div>
  10.     <div class="um-footer"></div>
  11. </div>

与此同时，我们在原有代码

  1. viewModel.data = ko.observableArray(jsonArray);

这句代码后面，给数据模型绑定一个rowData字段（后面会用到），用以编辑和修改行数据，如下所示：

  1. viewModel.rowData = ko.observable({
  2.     'company' : '',
  3.     'order_id' : '',
  4.     'order_status' : '待审核',
  5.     'order_money' : '',
  6.     'currency' : '$',
  7.     'order_date' : '',
  8.     'delivery_date' : '',
  9.     'contact_name' : '',
  10.     'contact_tel' : '',
  11.     'if_store' : false,
  12.     'memo' : ''
  13. })

在内容区插入uapmobile已有的表单控件，结构如下，并依照之前列表数据结构给表单元素添加绑定字段，如下所示：

  1. <ul class="um-list" data-bind="with:rowData">
  2.     <li>
  3.         <div class="um-list-item">
  4.             <div class="um-list-item-inner">
  5.                 <span class="h pa um-box-vc um-red f20" style="margin-left:-10px;">*</span>
  6.                 <div class="um-list-item-left">
  7.                     公司名称
  8.                 </div>
  9.                 <div class="um-list-item-right">
  10.                     <input type="text" class="form-control" placeholder="请输入公司名称" data-bind="value:company">
  11.                 </div>
  12.             </div>
  13.         </div>
  14.     </li>
  15.     <li>
  16.         <div class="um-list-item">
  17.             <div class="um-list-item-inner">
  18.                 <div class="um-list-item-left">
  19.                     订单编号
  20.                 </div>
  21.                 <div class="um-list-item-right">
  22.                     <input type="text" class="form-control" placeholder="请输入订单编号" data-bind="value:order_id">
  23.                 </div>
  24.             </div>
  25.         </div>
  26.     </li>
  27.     <li>
  28.         <div class="um-list-item">
  29.             <div class="um-list-item-inner">
  30.                 <div class="um-list-item-left">
  31.                     订单状态
  32.                 </div>
  33.                 <div class="um-list-item-right">
  34.                     <select class="form-control" data-bind="value:order_status">
  35.                         <option value="待审核">待审核</option>
  36.                         <option value="待发货">待发货</option>
  37.                         <option value="待收货">待收货</option>
  38.                         <option value="已交易">已交易</option>
  39.                         <option value="已关闭">已关闭</option>
  40.                     </select>
  41.                 </div>
  42.             </div>
  43.         </div>
  44.     </li>
  45.     <li>
  46.         <div class="um-list-item">
  47.             <div class="um-list-item-inner">
  48.                 <div class="um-list-item-left">
  49.                     订单金额
  50.                 </div>
  51.                 <div class="um-list-item-right">
  52.                     <input type="text" class="form-control" placeholder="请输入订单金额" data-bind="value:order_money">
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </li>
  57.     <li>
  58.         <div class="um-list-item">
  59.             <div class="um-list-item-inner">
  60.                 <div class="um-list-item-left">
  61.                     支付币别
  62.                 </div>
  63.                 <div class="um-list-item-right">
  64.                     <select class="form-control"  data-bind="value: currency">
  65.                         <option value="￥">人民币</option>
  66.                         <option value="$">美元</option>
  67.                     </select>
  68.                 </div>
  69.             </div>
  70.         </div>
  71.     </li>
  72.     <li>
  73.         <div class="um-list-item">
  74.             <div class="um-list-item-inner">
  75.                 <div class="um-list-item-left">
  76.                     下单日期
  77.                 </div>
  78.                 <div class="um-list-item-right">
  79.                     <input type="date" name="date" value="2015-01-01" class="form-control" data-bind="value:order_date">
  80.                 </div>
  81.             </div>
  82.         </div>
  83.     </li>
  84.     <li>
  85.         <div class="um-list-item">
  86.             <div class="um-list-item-inner">
  87.                 <span class="h pa um-box-vc um-red f20" style="margin-left:-10px;">*</span>
  88.                 <div class="um-list-item-left">
  89.                     预交货日期
  90.                 </div>
  91.                 <div class="um-list-item-right">
  92.                     <input type="date" name="date" value="2015-01-02" class="form-control" data-bind="value:delivery_date">
  93.                 </div>
  94.             </div>
  95.         </div>
  96.     </li>
  97.     <li>
  98.         <div class="um-list-item">
  99.             <div class="um-list-item-inner">
  100.                 <span class="h pa um-box-vc um-red f20" style="margin-left:-10px;">*</span>
  101.                 <div class="um-list-item-left">
  102.                     业务员
  103.                 </div>
  104.                 <div class="um-list-item-right">
  105.                     <input type="text" class="form-control" placeholder="请输入业务员名字" data-bind="value:contact_name">
  106.                 </div>
  107.             </div>
  108.         </div>
  109.     </li>
  110.     <li>
  111.         <div class="um-list-item">
  112.             <div class="um-list-item-inner">
  113.                 <div class="um-list-item-left">
  114.                     联系电话
  115.                 </div>
  116.                 <div class="um-list-item-right">
  117.                     <input type="text" class="form-control" placeholder="请输入业务员联系电话" data-bind="value:contact_tel">
  118.                 </div>
  119.             </div>
  120.         </div>
  121.     </li>
  122.     <li>
  123.         <div class="um-list-item">
  124.             <div class="um-list-item-inner">
  125.                 <div class="um-list-item-left">
  126.                     是否收藏订单
  127.                 </div>
  128.                 <div class="um-list-item-right">
  130.                     <label class="um-switch1">
  131.                         <input type="checkbox" value="on" data-bind="checked:if_store">
  132.                         <div class="um-track">
  133.                             <div class="um-handle"></div>
  134.                         </div> </label>
  135.                 </div>
  136.             </div>
  137.         </div>
  138.     </li>
  139.     <li>
  140.         <div class="um-list-item">
  141.             <div class="um-list-item-inner">
  142.                 <div class="um-list-item-left">
  143.                     备注
  144.                 </div>
  145.                 <div class="um-list-item-right">
  146.                     <textarea name="" id="" cols="30" rows="50" class="form-control" data-bind="value:memo"></textarea>
  147.                 </div>
  148.             </div>
  149.         </div>
  150.     </li>
  151. </ul>

接下来我们在之前列表侧滑删除代码的后面，继续书写列表新增和修改的代码逻辑：

  1. var list_status = "";
  2. //用于标识列表处于新增状态或者修改状态，edit代表编辑，add代表新增
  3. var active_index = 0;
  4. //用于存储被点击的行索引
  5. listview.on('itemClick', function(sender, args) {
  6.     var item = viewModel.data()[args.rowIndex];
  7.     viewModel.rowData(item);
  8.     active_index = args.rowIndex;
  9.     UM.page.changePage({
  10.         target : '#orderRow',
  11.         transition : 'f7'
  12.     });
  13.     list_status = "edit";
  14. });
  16. $('#add').click(function() {
  17.     viewModel.rowData({
  18.         'company' : ' ',
  19.         'order_id' : '',
  20.         'order_status' : '待审核',
  21.         'order_money' : '',
  22.         'currency' : '$',
  23.         'order_date' : '',
  24.         'delivery_date' : '',
  25.         'contact_name' : '',
  26.         'contact_tel' : '',
  27.         'if_store' : false,
  28.         'memo' : ' '
  29.     });
  30.     UM.page.changePage({
  31.         target : '#orderRow',
  32.         transition : 'drop'
  33.     });
  34.     list_status = 'add';
  35. });
  36. $('#save').on('click', function() {
  37.     var item = JSON.parse(ko.toJSON(viewModel.rowData));
  38.     switch(list_status) {
  39.     case 'add':
  40.         viewModel.data.unshift(item);
  41.         break;
  42.     case 'edit':
  43.         viewModel.data.splice(active_index, 1, item);
  44.     }
  45.     UM.page.back();
  46. });

3.效果图

首页

新增和修改页(同)

文档更新时间: 2018-01-15 14:46