开发实战

开发简单的crud应用

我们来使用knockout开发一个具备增删改功能的列表，首先确保如下文件的引入
  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>
添加首页id后增加导航栏，然后绑定事件
  1. <div class="um-header">
  2.      <a href="#" class="ti-pencil-alt f18 um-header-left" id="edite_list" data-bind="click: edite"></a>
  3.      <h3>标题</h3>
  4.      <a class="um-header-right ti-plus" href="#edite" data-bind="click: addlist" data-transition="pop"></a>
  5. </div>
在内容区新增列表行模板
  1. <ul class="um-list" id="shopContent"  data-bind="foreach: listData">
  2.      <li class="list-item">
  3.          <a href="#edite" class="um-list-item">
  4.              <div class="um-list-item-media">
  5.                  <label class="um-check-inline um-list-left-icon">
  6.                      <input name="um-checkbox-inline" type="checkbox">
  7.                      <span class="um-icon-checkbox um-css3-vc"></span>
  8.                  </label>
  9.                  <img height=40 width=40 data-bind="attr:{src:imgsrc}" alt="...">
  10.              </div>
  11.              <div class="um-list-item-inner" data-bind="click: $parent.lineClick">
  12.                  <div class="um-list-item-body">
  13.                      <h4 class="um-media-heading" data-bind="text: title"></h4>
  14.                      <p data-bind="text: content"></p>
  15.                      <p data-bind='visible: $parent.tipsVisible() > 0.5, text: tips' class="um-red"></p>
  16.                  </div>
  17.                  <div class="um-list-item-right">
  18.                      <div class="mr15" data-bind="text: status"></div>
  19.                      <span class="f12 mr15" data-bind="text: time"></span>
  20.                  </div>
  21.              </div>
  22.          </a>
  23.      </li>
  24. </ul>
该列表设置了a标签指向id为edite的页面，后面我们再增加edite页面
在内容区外(或者um-footer里)增加2个编辑操作的按钮
  1. <div class="none" id="check">
  2.      <div class="um-box-justify p10">
  3.          <a href="#" data-bind="click: checkAll">全选</a>
  4.          <a href="#" data-bind="click: remove">删除</a>
  5.      </div>
  6. </div>
新增edite页面
  1. <div class="um-page" id="edite">
  2.         <div class="um-header" >
  3.          <a href="#"  class="um-back"> 返回</a>
  4.          <h3>导航栏</h3>
  5.          <a class="um-header-right ti-save" href="#" data-bind="click: save"></a>
  6.      </div>
  7.      <div class="um-content">
  8.          <ul class="um-list" data-bind="with: line">
  9.              <li>
  10.                  <div class="um-list-item">
  11.                      <div class="um-list-item-inner">
  12.                          <div class="um-list-item-left">企业:</div>
  13.                          <div class="um-list-item-right">
  14.                              <input type="text" class="form-control" data-bind="value: title">
  15.                          </div>
  16.                      </div>
  17.                  </div>
  18.              </li>
  19.              <li>
  20.                  <div class="um-list-item">
  21.                      <div class="um-list-item-inner">
  22.                          <div class="um-list-item-left">经营范围:</div>
  23.                          <div class="um-list-item-right">
  24.                              <input type="text" class="form-control"  data-bind="value: content">
  25.                          </div>
  26.                      </div>
  27.                  </div>
  28.              </li>
  29.              <li>
  30.                  <div class="um-list-item">
  31.                      <div class="um-list-item-inner">
  32.                          <div class="um-list-item-left">状态:</div>
  33.                          <div class="um-list-item-right">
  34.                              <select name="" class="form-control" data-bind="value: status">
  35.                                  <option value="审阅中">审阅中</option>
  36.                                  <option value="已批准">已批准</option>
  37.                                  <option value="未提交">未提交</option>
  38.                              </select>
  39.                          </div>
  40.                      </div>
  41.                  </div>
  42.              </li>
  43.          </ul>
  44.      </div>
  45.   </div>
生成带有多个字段的多条数据
  1. var shopData = {
  2.      data : []
  3. };
  4. for (var i = 0; i < 35; i++) {
  5.      var j = {};
  6.      j.title = "ZJT股份有限公司" + i;
  7.      j.content = ["生产","加工","销售","包装","采购"][parseInt(Math.random() * 5)];
  8.      j.time = "星期" + ["一","二","三","四","五","六","七"][parseInt(Math.random() * 7)];
  9.      j.status = ["审阅中","已批准","未提交"][i%3];
  10.      j.imgsrc = "img/portal.jpg";
  11.      j.tips = "提示" + i;
  12.      shopData.data.push(j);
  13. }
绑定模型
  1. function shopModal(){
  2.      var self = this;
  3.      // 设置默认值
  4.      self.defaults = {
  5.          activeIndex: 0,
  6.          isAdd: false,
  7.          isAllcheck: false,
  8.          isCancle: true,
  9.          initData: {
  10.              title: "",
  11.              content: "",
  12.              status: "",
  13.              time: "星期一",
  14.              imgsrc: "img/s5.png",
  15.              tips: ""
  16.          }
  17.      }
  18.      // 将数据数组绑定到模型的listData上，通过foreach可以遍历并渲染出来
  19.      self.listData = ko.observableArray(shopData.data);
  21.      // 绑定edite页面的输入框的数据为初始值
  22.      self.line = ko.observable(self.defaults.initData);
  24.      // 设置tips字段为随机显示
  25.      self.tipsVisible = function() {
  26.          return Math.random();
  27.      }
  29.      // 定义行点击事件监听
  30.      self.lineClick = function(data, e) {
  31.          var lineData = $.extend({},self.defaults.initData,data);
  32.          self.line(lineData);
  33.          var index = $(e.target).closest("li").index();
  34.          self.defaults.activeIndex = index;
  35.          self.defaults.isAdd = false;
  36.      }
  38.      // 增加列表数据
  39.      self.addlist = function () {
  40.          initData = {
  41.              title: "",
  42.              content: "",
  43.              status: "",
  44.              time: "星期一",
  45.              imgsrc: "img/s5.png",
  46.              tips: ""
  47.          }
  48.          self.line(initData);
  49.          self.defaults.activeIndex = 0;//self.listData().length;
  50.          self.defaults.isAdd = true;
  51.      }
  53.      // 保存列表数据
  54.      self.save = function() {
  55.          var newLine = new self.line();
  56.          if(!newLine.title || !newLine.content) {
  57.              UM.modal("alert","亲，输入数据后才能保存哦！");
  58.              return;
  59.          }
  60.          if(self.defaults.isAdd) {
  61.              self.listData.splice(self.defaults.activeIndex, 0, newLine);
  62.          } else {
  63.              self.listData.splice(self.defaults.activeIndex, 1, newLine);
  64.          }
  65.          UM.page.back();
  66.      }
  68.      // 全选
  69.      self.checkAll = function(){
  70.          self.defaults.isAllcheck = !self.defaults.isAllcheck;
  71.          $("#shopContent").find("input:checkbox").prop("checked", self.defaultsisAllcheck);
  72.      }
  74.      // 编辑列表
  75.      self.edite = function(modal, e) {
  76.          var target = $(e.target);
  77.          if(self.defaults.isCancle) {
  78.              openCheck();
  79.              target.removeClass("ti-pencil-alt").html("取消");
  80.          } else {
  81.              closeCheck();
  82.              target.html("").addClass("ti-pencil-alt");
  83.          }
  84.          self.defaults.isCancle = !self.defaults.isCancle;
  85.      }
  86.      self.remove = function() {
  87.          $.each($("#shopContent").find("input:checkbox:checked"),function(){
  88.              var checkItem = $(this).closest(".list-item");
  89.              var i = checkItem.index()
  90.              checkItem.slideUp(400, function(){
  91.                 closeCheck();
  92.                  var index = checkItem.index();
  93.                  checkItem.remove();
  94.              });
  95.          });
  96.          $("#edite_list").trigger("click");
  97.      }
  98.  }
  99. // 绑定模型 
  100. ko.applyBindings(new shopModal());
  102. // 打开底部编辑工具栏和列表选择框
  103. function openCheck() {
  104.      $("#shopContent").find(".um-list-item").addClass("um-list-left-open");
  105.      $("#index #check").removeClass("none");
  106. }
  107. // 关闭底部编辑工具栏和列表选择框
  108. function closeCheck() {
  109.      $("#shopContent").find(".um-list-item").removeClass("um-list-left-open");
  110.      $("#index #check").addClass("none");
  111. }
最终效果如下


文档更新时间: 2018-01-12 16:32