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

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

本文关键字：ZK 填充 组合 客户端 JavaScript 何使用      更新时间：2023-09-26

我想制作一个基于zk组合框的新zk组件，保存以前输入的历史。我想将这些以前的输入存储在客户端的localStorage中。所以我不得不在客户端使用JavaScript填充combobox，但不知道如何做到这一点。

我自己的解决方案：

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>
相关文章：