ZK：如何使用 JavaScript 在客户端填充 zk 组合框

Question

我想基于 zk 组合框制作新的 zk 组件，它保存了以前输入的历史记录。我想将这些先前的输入存储在客户端的 localStorage 中。所以我必须使用 JavaScript 在客户端填充组合框，但不知道该怎么做。

Answer 1

我自己的解决方案：

src\com\foo\HistoryLinkCombobox.java

package com.foo;

import org.zkoss.zk.ui.sys.ContentRenderer;
import org.zkoss.zul.Combobox;

public class HistoryLinkCombobox extends Combobox
{
   public static final String PR_HISTORY_INDEX = "historyIndex";
   private int _historyIndex;

   public int getHistoryIndex()
   {
      return _historyIndex;
   }

   public void setHistoryIndex( int historyIndex )
   {
      if( _historyIndex == historyIndex )
         return;

      _historyIndex = historyIndex;
      smartUpdate( PR_HISTORY_INDEX, _historyIndex );
   }

   protected void renderProperties( ContentRenderer renderer )
         throws java.io.IOException
   {
      super.renderProperties( renderer );
      render( renderer, PR_HISTORY_INDEX, _historyIndex );
   }
}

src\web\js\com\foo\HistoryLinkCombobox.js

com.foo.HistoryLinkCombobox = zk.$extends(zul.inp.Combobox, {

   $define : {
      historyIndex : function(value) {
         if (this.desktop)
            this.clear();
      }
   },

   $init : function() {
      this.$supers('$init', arguments);
      this.setZclass('z-combobox');
   },

   open : function() {
      this._getItemsFromLocalStorage();
      this.$supers('open', arguments);
   },

   doBlur_ : function() {
      this.$super('doBlur_', arguments);
      this._storeInputInLocalStorage();
   },

   _getItemsFromLocalStorage : function() {
      if (!this._canUseLocalStorage())
         return;

      var prevInputs = this._getPrevInputs();

      for ( var i = 0; i < prevInputs.length; i++) {
         this._createComboitem(prevInputs[i]);
      }
   },

   _createComboitem : function(lbl) {
      for ( var ci = this.firstChild; ci; ci = ci.nextSibling)
         if (ci.getLabel() == lbl)
            return;

      var item = new zul.inp.Comboitem({
         label : lbl
      });
      this.appendChild(item);
   },

   _storeInputInLocalStorage : function() {
      if (!this._canUseLocalStorage())
         return;

      var prevInputs = this._getPrevInputs();
      var currentInput = this.getValue();
      if (!currentInput || jq.inArray(currentInput, prevInputs) != -1)
         return;

      prevInputs.push(currentInput);
      localStorage[this._getStorageKey()] = prevInputs.toString();
   },

   _canUseLocalStorage : function() {
      return typeof (Storage) !== "undefined" && this.getHistoryIndex() != 0;
   },

   _getStorageKey : function() {
      return "com.foo.historyIndex." + this.getHistoryIndex();
   },

   _getPrevInputs : function() {
      var prevInputs = localStorage[this._getStorageKey()];

      return prevInputs ? prevInputs.split(",") : [];
   },

});

WEB-INF\lang-addon-com-foo.xml

<?xml version="1.0" encoding="UTF-8"?>
<language-addon>
   <addon-name>comfoo</addon-name>
   <language-name>xul/html</language-name>

   <component>
      <component-name>historylinkcombobox</component-name>
      <component-class>com.foo.HistoryLinkCombobox</component-class>
      <widget-class>com.foo.HistoryLinkCombobox</widget-class>
   </component>
</language-addon>

WEB-INF\zk.xml

<zk>
   <language-config>
        <addon-uri>/WEB-INF/lang-addon-com-foo.xml</addon-uri>
   </language-config>
</zk>

ZK：如何使用 JavaScript 在客户端填充 zk 组合框

ZK: How to populate zk combobox on client side using JavaScript

javascript

local-storage

zk