Reference Source

UI控件

AutoComplete

输入提示框控件

参考： AutoComplete

输入提示框的基本用法

  1. 在html文件中添加如下代码：

    <input id="autocomplete" />

  2. 在js文件中添加如下代码：

     var autoComplete = new KQ.ui.AutoComplete('autocomplete', {});

 var data = [
   "America",
   "Australia",
   "China",
   "France",
   "Germany",
   "Greece",
   "Iceland",
   "Japan",
   "Korea",
   "Netherlands",
   "Poland",
   "Russia",
   "Switzerland",
   "England",
 ];
 autoComplete.setDataSource(data);

结果：

auto-complete

Button

UI按钮控件

参考： Button

添加按钮

  1. 在Html中添加代码：

    <button id="button" type="button">My Button</button>

  2. 在JS文件中添加代码：

    var button = new KQ.ui.Button('button', {});
button.enable(false);

结果：

result

Chart

统计图控件

参考： Chart

饼状图的基本用法

  1. 在html文件中添加如下代码：

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. 在js文件中添加如下代码：

         var data = [{
        categoryField: "Asia",
        value: 30.8,
        color: "#9de219"
      },{
        categoryField: "Europe",
        value: 21.1,
        color: "#90cc38"
      },{
        categoryField: "Latin America",
        value: 16.3,
        color: "#068c35"
      },{
        categoryField: "Africa",
        value: 17.6,
        color: "#006634"
      },{
        categoryField: "Middle East",
        value: 9.2,
        color: "#004d38"
      },{
        categoryField: "North America",
        value: 4.6,
        color: "#033939"
      }];

      var chart = new KQ.ui.Chart('chart', {
        dataSource: {
          data: data,
        },

        title: {
          position: "top",
          text: "Share of Internet Population Growth",
        },

        legend: {
          visible: true,
          position: "left",
        },

        series: [{
          type: "pie",    // 饼状图
          field: "value",
          categoryField: "categoryField",

          labels: {
            visible: true,
            background: "transparent",
            template: "#= category #: \n #= value#%",
          }
        }],

        tooltip: {
          visible: true,
          template: "#= category #-#= value #%",
        },
      });

结果：

result-0

柱状图的基本用法（水平方向）

  1. 在html文件中添加如下代码：

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. 在js文件中添加如下代码：

          var data = [{
        categoryField: "Asia",
        value: 30.8,
        color: "#9de219"
      },{
        categoryField: "Europe",
        value: 21.1,
        color: "#90cc38"
      },{
        categoryField: "Latin America",
        value: 16.3,
        color: "#068c35"
      },{
        categoryField: "Africa",
        value: 17.6,
        color: "#006634"
      },{
        categoryField: "Middle East",
        value: 9.2,
        color: "#004d38"
      },{
        categoryField: "North America",
        value: 4.6,
        color: "#033939"
      }];

      var chart = new KQ.ui.Chart('chart', {
        dataSource: {
          data: data,
        },

        title: {
          position: "top",
          text: "Share of Internet Population Growth",
        },

        legend: {
          visible: true,
          position: "left",
        },

        series: [{
          type: "bar",    // 柱状图 (水平方向)
          field: "value",
          categoryField: "categoryField",
        }],
      });

结果：

result-1

柱状图的基本用法（垂直方向）

  1. 在html文件中添加如下代码：

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. 在js文件中添加如下代码：

          var data = [{
        categoryField: "Asia",
        value: 30.8,
        color: "#9de219"
      },{
        categoryField: "Europe",
        value: 21.1,
        color: "#90cc38"
      },{
        categoryField: "Latin America",
        value: 16.3,
        color: "#068c35"
      },{
        categoryField: "Africa",
        value: 17.6,
        color: "#006634"
      },{
        categoryField: "Middle East",
        value: 9.2,
        color: "#004d38"
      },{
        categoryField: "North America",
        value: 4.6,
        color: "#033939"
      }];

      var chart = new KQ.ui.Chart('chart', {
        dataSource: {
          data: data,
        },

        title: {
          position: "top",
          text: "Share of Internet Population Growth",
        },

        legend: {
          visible: true,
          position: "left",
        },

        series: [{
          // type: "bar",    // 不设置type 为垂直方向柱状图
          field: "value",
          categoryField: "categoryField",
        }],
      });

结果：

result-2

显示额外的字段

  1. 在html文件中添加如下代码：

    <div id="chart" style="width: 600px; height: 500px;"></div>

  2. 在js文件中添加如下代码：

             var data = [{
           categoryField: "Asia",
           value: 100,
           ratio: "50%",
           color: "#56a36c",
         },{
           categoryField: "Europe",
           value: 100,
           ratio: "50%",
           color: "#2e68aa",
         }];

         var chart = new KQ.ui.Chart('chart', {
           dataSource: {
             data: data,
           },

           title: {
             position: "top",
             text: "Share of Internet Population Growth",
           },

           legend: {
             visible: true,
             position: "left",
           },

           series: [{
             type: "pie",    // 饼状图
             field: "value",
             categoryField: "categoryField",

             labels: {
               visible: true,
               background: "transparent",
               template: "#= category #: \n  value: #= data.dataItem.value ## ratio: #= data.dataItem.ratio #",
             }
           }],
         });

结果：

result-3

Checkbox

复选框控件

参考： Checkbox

添加复选框

  1. 在html文件中添加如下代码：

    <div id="checkbox"></div>

  2. 在js文件中添加如下代码：

    var checkbox = new KQ.ui.Checkbox('checkbox', {label: 'this is a checkbox'});

结果：

result-0

设置选中、不选中状态

  1. 在html文件中添加如下代码：

    <div id="checkbox1"></div>
<div id="checkbox2"></div>

  2. 在js文件中添加如下代码：

    var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is checked'});
var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is unchecked'});

checkbox1.checked(true);
checkbox2.checked(false);

结果：

result-1

设置可用、不可用状态

  1. 在html文件中添加如下代码：

    <div id="checkbox1"></div>
<div id="checkbox2"></div>

  2. 在js文件中添加如下代码：

    var checkbox1 = new KQ.ui.Checkbox('checkbox1', {label: 'the status is enabled'});
var checkbox2 = new KQ.ui.Checkbox('checkbox2', {label: 'the status is disabled'});

checkbox1.enable(true);
checkbox2.enable(false);

结果：

result-2

添加下拉菜单组件

参考: dropdownlist

添加下拉菜单

  1. 在html文件中添加代码:

    <input id="dropdownlist" />

  2. 在js文件中添加代码:

    var dropdownlist = new KQ.ui.DropdownList('dropdownlist', {});
dropdownlist.setDataSource(['A', 'B', 'C']);

结果:

dropdownlist

Grid

网格控件

参考： Grid

添加网格控件

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

     var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

结果：

result-0

表头样式设置

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

       var grid = new KQ.ui.Grid('grid', {
       columns: [
         {
           field: "name", title: "The Name",
           attributes: {
             "class": "name-cell",
             style: "text-align: left",
           },
           headerAttributes: {
             "class": "name-header",
             style: "text-align: left",
           },
         },
         {
           field: "age", title: "The Age", width: 100,
           attributes: {
             "class": "name-cell",
             style: "text-align: center",
           },
           headerAttributes: {
             "class": "name-header",
             style: "text-align: center",
           },
         },
         {
           field: "sex", title: "The Sex",
           attributes: {
             "class": "name-cell",
             style: "text-align: right",
           },
           headerAttributes: {
             "class": "name-header",
             style: "text-align: right",
           },
         },
       ],
       dataSource: [
         {name: "Jane Doe", age: 18, sex: "Male"},
         {name: "John Doe", age: 19, sex: "Male"},
         {name: "Eric Brown", age: 20, sex: "Female"},
         {name: "George Doe", age: 21, sex: "Female"},
       ],
     });

结果：

result-1

高度和滚动条设置

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

     var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   height: 80,
   scrollable: true,
 });

结果：

result-2

选择属性设置

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

     var grid = new KQ.ui.TreeList('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: true,
 });

结果：

result-3

列宽设置

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

    var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name", width: 200},
     {field: "age", title: "The Age", width: 200},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

结果：

result-4

分页属性设置

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

       var grid = new KQ.ui.Grid('grid', {
        columns: [
          {field: "name", title: "The Name", width: 200},
          {field: "age", title: "The Age", width: 200},
          {field: "sex", title: "The Sex"},
        ],
        dataSource: [
          {name: "Jane Doe", age: 18, sex: "Male"},
          {name: "John Doe", age: 19, sex: "Male"},
          {name: "Eric Brown", age: 20, sex: "Female"},
          {name: "George Doe", age: 21, sex: "Female"},
        ],

        pageable: {
          pageSize: 2,
          pageSizes: [1, 2, 4, "all"],
          refresh: true,
        },
      });

结果：

result-5

提示信息设置

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

    var grid = new KQ.ui.Grid('grid', {
     columns: [
       {field: "name", title: "The Name", width: 200},
       {field: "age", title: "The Age", width: 200},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {name: "Jane Doe", age: 18, sex: "Male"},
       {name: "John Doe", age: 19, sex: "Male"},
       {name: "Eric Brown", age: 20, sex: "Female"},
       {name: "George Doe", age: 21, sex: "Female"},
     ],

     pageable: {
       pageSize: 2,

       messages: {
         previous: "前一页",
         next: "后一页",
       },
     },
   });

结果：

result-6

选中和清除选中项

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

    var grid = new KQ.ui.Grid('grid', {
    columns: [
      {field: "name", title: "The Name", width: 200},
      {field: "age", title: "The Age", width: 200},
      {field: "sex", title: "The Sex"},
    ],
    dataSource: [
      {name: "Jane Doe", age: 18, sex: "Male"},
      {name: "John Doe", age: 19, sex: "Male"},
      {name: "Eric Brown", age: 20, sex: "Female"},
      {name: "George Doe", age: 21, sex: "Female"},
    ],

    selectable: "multiple, row",
  });

  // select the first table row
  grid.select("tr:eq(0)");
  grid.clearSelection();

获取item中的数据

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

    var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name", width: 200},
     {field: "age", title: "The Age", width: 200},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],

   selectable: "multiple, row",
 });

 var data = grid.dataItem("tbody>tr:eq(1)");
 console.log("name: " + data.name + "  " + "age: " + data.age + "  " + "sex: " + data.sex); // displays "name: John Doe  age: 19  sex: Male"

change事件

  1. 在html文件中添加如下代码：

    <div id="grid"></div>

  2. 在js文件中添加如下代码：

    var grid = new KQ.ui.Grid('grid', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age"},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: "multiple, row",

   change: function(e) {
     var selectedRows = this.select();
     console.log(selectedRows.length);
     var selectedDataItems = []
     for (var i = 0; i < selectedRows.length; i++) {
       var dataItem = this.dataItem(selectedRows[i]);
       selectedDataItems.push(dataItem);                 // selectedDataItems中包含了所有的选中项
     }
   },
 });

ListView

列表展示框

参考： ListView

列表展示框的基本用法

  1. 在html文件中添加如下代码：

    <div id="listView"></div>

  2. 在js文件中添加如下代码：

       var listView = new KQ.ui.ListView('listView', {});
   listView.setDataSource([{name: '武汉'},
                           {name: '南京'},
                           {name: '上海'},
                           {name: '杭州'},
                           {name: '广州'}]);
   listView.selectFirstItem();   // Selects first list view item

   var select_item = listView.dataItem(listView.select());   // Get select item
   var select_item_name = select_item.name;
   console.log(select_item_name);

结果：

list-view

MaskedTextBox

文本输入框控件

参考： MaskedTextBox

文本输入框的基本用法

  1. 在html文件中添加如下代码：

    <input id="maskedtextbox" />

  2. 在js文件中添加如下代码：

    var maskedtextbox = new KQ.ui.MaskedTextBox('maskedtextbox', {});
maskedtextbox.value("Enter value...");

结果：

masked-text-box

PanelBar

面板栏控件

参考： PanelBar

面板栏控件的基本用法

  1. 在css文件中添加如下代码：

     #panelbar{
   margin: 10px;
   width: 300px;
 }

  2. 在html文件中添加如下代码：

    <div id="panelbar"></div>

  3. 在js文件中添加如下代码：

     var panelbar = new KQ.ui.PanelBar('panelbar', {
   dataSource: [
     {
       text: "Baseball", imageUrl: "./icons/baseball.png",
       items: [
         {text: "Top News", imageUrl: "./icons/star.png"},
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"},
         {text: "Videos Records", imageUrl: "./icons/video.png"},
         {text: "Radio Records", imageUrl: "./icons/speaker.png"}
       ]
     },
     {
       text: "Golf", imageUrl: "./icons/golf.png",
       items: [
         {text: "Top News", imageUrl: "./icons/star.png"},
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"},
         {text: "Videos Records", imageUrl: "./icons/video.png"},
         {text: "Radio Records", imageUrl: "./icons/speaker.png"}
       ]
     },
     {
       text: "Swimming", imageUrl: "./icons/swimming.png",
       items: [
         {text: "Top News", imageUrl: "./icons/star.png"},
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"}
       ]
     },
     {
       text: "Snowboarding", imageUrl: "./icons/snowboarding.png",
       items: [
         {text: "Photo Galleries", imageUrl: "./icons/photo.png"},
         {text: "Videos Records", imageUrl: "./icons/video.png"}
       ]
     }
   ],
 });

结果： result-0

模板的使用

  1. 在css文件中添加如下代码：

     #panelbar{
   margin: 10px;
   width: 300px;
 }

  2. 在html文件中添加如下代码：

    <div id="panelbar"></div>

  3. 在js文件中添加如下代码：

     var panelbar = new KQ.ui.PanelBar('panelbar', {
   template: "#= item.text ## (#= item.inStock #)",
   dataSource: [
     { text: "foo", inStock: 7, items: [
       { text: "bar", inStock: 2 },
       { text: "baz", inStock: 5 }
     ] }
   ]
 });

结果： result-1

select事件

  1. 在html文件中添加如下代码：

    <div id="panelbar"></div>

  2. 在js文件中添加如下代码：

     var panelbar = new KQ.ui.PanelBar('panelbar', {
   template: "#= item.text ## (#= item.inStock #)",
   dataSource: [
     { text: "foo", inStock: 7, items: [
       { text: "bar", inStock: 2 },
       { text: "baz", inStock: 5 }
     ],}
   ],

   select: function(e){
     var dataItem = panelbar.dataItem(e.item);
     // 输出: item info: (text: bar, inStock: 2)
     console.log('item info: ' + '(text: '+ dataItem.text + ', inStock: ' + dataItem.inStock + ')');
   },
 });

RadioButton

单选按钮控件

查看： RadioButton

添加单选按钮

  1. 在html文件中添加如下代码：

    <div id="radiobutton"></div>

  2. 在js文件中添加如下代码：

    var radiobutton = new KQ.ui.RadioButton('radiobutton', {label: 'this is a radiobutton'});

结果：

result-0

设置选中、不选中状态

  1. 在html文件中添加如下代码：

    <div id="radiobutton1"></div>
<div id="radiobutton2"></div>

  2. 在js文件中添加如下代码：

    var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is checked'});
var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is unchecked'});

radiobutton1.checked(true);
radiobutton2.checked(false);

结果：

result-1

设置可用、不可用状态

  1. 在js文件中添加如下代码：

    <div id="radiobutton1"></div>
<div id="radiobutton2"></div>

  2. 在js文件中添加如下代码：

    var radiobutton1 = new KQ.ui.RadioButton('radiobutton1', {label: 'the status is enabled'});
var radiobutton2 = new KQ.ui.RadioButton('radiobutton2', {label: 'the status is disabled'});

radiobutton1.enable(true);
radiobutton2.enable(false);

结果：

result-2

TabStrip

标签页控件

参考： TabStrip

标签页控件的基本用法

  1. 在html文件中添加如下代码：

    <div id="tabstrip">
 <ul>
     <li class="k-state-active">
         Paris
     </li>
     <li>
         New York
     </li>
     <li>
         London
     </li>
     <li>
         Moscow
     </li>
 </ul>
 <div>
     <span class="rainy">&nbsp;</span>
     <div class="weather">
         <h2>17<span>&ordm;C</span></h2>
         <p>Rainy weather in Paris.</p>
     </div>
 </div>
 <div>
     <span class="sunny">&nbsp;</span>
     <div class="weather">
         <h2>29<span>&ordm;C</span></h2>
         <p>Sunny weather in New York.</p>
     </div>
 </div>
 <div>
     <span class="sunny">&nbsp;</span>
     <div class="weather">
         <h2>21<span>&ordm;C</span></h2>
         <p>Sunny weather in London.</p>
     </div>
 </div>
 <div>
     <span class="cloudy">&nbsp;</span>
     <div class="weather">
         <h2>16<span>&ordm;C</span></h2>
         <p>Cloudy weather in Moscow.</p>
     </div>
 </div>
</div>

  2. 在css文件中添加如下代码：

    .sunny, .cloudy, .rainy {
         display: block;
         margin: 30px auto 10px;
         width: 128px;
         height: 128px;
         background: url('weather.png') transparent no-repeat 0 0;
     }

     .cloudy{
         background-position: -128px 0;
     }

     .rainy{
         background-position: -256px 0;
     }

     .weather {
         margin: 0 auto 30px;
         text-align: center;
     }

     #tabstrip h2 {
         font-weight: lighter;
         font-size: 5em;
         line-height: 1;
         padding: 0 0 0 30px;
         margin: 0;
     }

     #tabstrip h2 span {
         background: none;
         padding-left: 5px;
         font-size: .3em;
         vertical-align: top;
     }

     #tabstrip p {
         margin: 0;
         padding: 0;
     }

  3. 在js文件中添加如下代码：

     var tabstrip =  new KQ.ui.TabStrip('tabstrip', {});

结果：

result-0

标签页标签中加入图片

  1. 在html文件中添加如下代码：

    <div id="tabstrip"></div>

  2. 在js文件中添加如下代码：

       var tabstrip = new KQ.ui.TabStrip('tabstrip', {
      dataTextField: "text",
      dataImageUrlField: "imageUrl",
      dataContentField: "content",
      dataSource: [
        {
          text: "Baseball",
          imageUrl: "baseball.png",
          content: "Baseball is a bat-and-ball sport played between two teams of nine players each. The aim is to
           score runs by hitting a thrown ball with a bat and touching a series of four bases arranged at the
           corners of a ninety-foot diamond. Players on the batting team take turns hitting against the
           pitcher of the fielding team, which tries to stop them from scoring runs by getting hitters out
            in any of several ways. A player on the batting team can stop at any of the bases and
             advance via a teammate's hit or other means. The teams switch between batting and fielding
             whenever the fielding team records three outs. One turn at bat for each team constitutes an
             inning and nine innings make up a professional game. The team with the most runs at the end
              of the game wins."
        },
        {
          text: "Golf",
          imageUrl: "golf.png",
          content: "Golf is a precision club and ball sport, in which competing players (or golfers)
          use many types of clubs to hit balls into a series of holes on a golf course using the fewest
          number of strokes. It is one of the few ball games that does not require a standardized playing area.
          Instead, the game is played on golf courses, each of which features a unique design, although courses
          typically consist of either nine or 18 holes. Golf is defined, in the rules of golf, as playing a ball
          with a club from the teeing ground into the hole by a stroke or successive strokes in accordance with
          the Rules."
        },
        {
          text: "Swimming",
          imageUrl: "swimming.png",
          content: "Swimming has been recorded since prehistoric times; the earliest recording of swimming dates
           back to Stone Age paintings from around 7,000 years ago. Written references date from 2000 BC. Some of
            the earliest references to swimming include the Gilgamesh, the Iliad, the Odyssey, the Bible, Beowulf,
             and other sagas. In 1578, Nikolaus Wynmann, a German professor of languages, wrote the first swimming
              book, The Swimmer or A Dialogue on the Art of Swimming (Der Schwimmer oder ein Zwiegespräch über die
               Schwimmkunst). Competitive swimming in Europe started around 1800, mostly using breaststroke."
        }
      ]
    });

    tabstrip.select(0);

结果：

result-1

TextArea

添加文本框组件

参考: TextArea

添加文本框

  1. 在html文件中添加代码:

    <textarea id="myid">default-content</textarea>

  2. 在js文件中添加代码:

    var textarea = new KQ.ui.TextArea('myid');
textarea.value("my content");  //change the contont to "my content"
console.log(textarea.value()); //print "my content"

结果:

textarea

textarea

TreeList

树列表控件

参考： TreeList

添加树列表控件

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

结果：

result-0

设置表头样式

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {
       field: "name", title: "The Name",
       attributes: {
         "class": "name-cell",
         style: "text-align: left",
       },
       headerAttributes: {
         "class": "name-header",
         style: "text-align: left",
       },
     },
     {
       field: "age", title: "The Age", width: 100,
       attributes: {
         "class": "name-cell",
         style: "text-align: center",
       },
       headerAttributes: {
         "class": "name-header",
         style: "text-align: center",
       },
     },
     {
       field: "sex", title: "The Sex",
       attributes: {
         "class": "name-cell",
         style: "text-align: right",
       },
       headerAttributes: {
         "class": "name-header",
         style: "text-align: right",
       },
     },
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
 });

结果：

result-1

设置高度和滚动条

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   height: 80,
   scrollable: true,
 });

结果：

result-2

选择属性

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

     var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age", width: 100},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: true,
 });

结果：

result-3

展开属性

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

     var treelist = new KQ.ui.TreeList('treelist', {
     columns: [
       {field: "name", title: "The Name", expandable: true},
       {field: "age", title: "The Age"},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"},
       {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"},
       {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"},
       {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"},
     ],
   });

结果：

result-4

选中行或列

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

      var treelist = new KQ.ui.TreeList('treelist', {
     columns: [
       {field: "name", title: "The Name"},
       {field: "age", title: "The Age"},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {name: "Jane Doe", age: 18, sex: "Male"},
       {name: "John Doe", age: 19, sex: "Male"},
       {name: "Eric Brown", age: 20, sex: "Female"},
       {name: "George Doe", age: 21, sex: "Female"},
     ],

     selectable: "cell",
   });
   treelist.select($("#treelist td:eq(0)"));

结果：

result-5

展开行

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

    var treelist = new KQ.ui.TreeList('treelist', {
     columns: [
       {field: "name", title: "The Name", expandable: true},
       {field: "age", title: "The Age"},
       {field: "sex", title: "The Sex"},
     ],
     dataSource: [
       {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"},
       {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"},
       {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"},
       {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"},
     ],
   });
   treelist.expand($("#treelist tbody>tr:eq(0)"));

结果：

result-6

得到项的数据

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

    var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name", expandable: true},
     {field: "age", title: "The Age"},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {id: 1, parentId: null, name: "Jane Doe", age: 18, sex: "Male"},
     {id: 2, parentId: 1, name: "John Doe", age: 19, sex: "Male"},
     {id: 3, parentId: 1, name: "Eric Brown", age: 20, sex: "Female"},
     {id: 4, parentId: 1, name: "George Doe", age: 21, sex: "Female"},
   ],
 });
 var data = treelist.dataItem("tbody>tr:eq(1)");
 console.log("name: " + data.name + "  " + "age: " + data.age + "  " + "sex: " + data.sex); // displays "name: John Doe  age: 19  sex: Male"

change事件

  1. 在html文件中添加如下代码：

    <div id="treelist"></div>

  2. 在js文件中添加如下代码：

    var treelist = new KQ.ui.TreeList('treelist', {
   columns: [
     {field: "name", title: "The Name"},
     {field: "age", title: "The Age"},
     {field: "sex", title: "The Sex"},
   ],
   dataSource: [
     {name: "Jane Doe", age: 18, sex: "Male"},
     {name: "John Doe", age: 19, sex: "Male"},
     {name: "Eric Brown", age: 20, sex: "Female"},
     {name: "George Doe", age: 21, sex: "Female"},
   ],
   selectable: "multiple, row",

   change: function(e) {
     var selectedRows = this.select();
     console.log(selectedRows.length);
     var selectedDataItems = []
     for (var i = 0; i < selectedRows.length; i++) {
       var dataItem = this.dataItem(selectedRows[i]);
       selectedDataItems.push(dataItem);                 // selectedDataItems中包含了所有选中项
     }
   },
 });

TreeView

树视图控件

参考： TreeView

添加树视图控件

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

         // 节点包含如下属性：
     // key        节点id (树视图中必须唯一)
     // title      节点的显示名称
     // data       节点的附加数据
     // children   子节点数组
     // expanded   是否展开
     // folder     是否为文件夹
     // selected   是否选中
     // tooltip    提示信息

    var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"},
      {key: "id2", title: "item2"},
      {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true,  children: [
              {key: "id3.1.1", title: "Sub-item 3.1.1"},
              {key: "id3.1.2", title: "Sub-item 3.1.2"},
             ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3"},
        ]},
    ];

    var treeview = new KQ.ui.TreeView('treeview', { source: dataSource});

结果：

result-0

是否显示复选框

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

      var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"},
      {key: "id2", title: "item2", selected: true},
      {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true,  children: [
              {key: "id3.1.1", title: "Sub-item 3.1.1"},
              {key: "id3.1.2", title: "Sub-item 3.1.2"},
             ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3"},
        ]},
    ];

    var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, checkbox: true});

结果：

result-1

定制图标

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

     var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"},
      {key: "id2", title: "item2", selected: true, icon: "point.png"},
      {key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true,  children: [
              {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"},
              {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"},
             ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"},
        ]},
    ];

    var treeview = new KQ.ui.TreeView('treeview', { source: dataSource, imagePath: "../../images/"});

结果：

result-2

select事件

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

    var dataSource = [
   {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"},
   {key: "id2", title: "item2", selected: true, icon: "point.png"},
   {
     key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
     {
       key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [
       {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"},
       {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"},
     ],
     },
     {
       key: "id3.2", title: "Sub-item 3.2", folder: true,
       children: [
         {key: "id3.2.1", title: "Sub-item 3.2.1"},
         {key: "id3.2.2", title: "Sub-item 3.2.2"},
       ],
     },
     {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"},
   ]
   },
 ];

 var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"});
 treeview.on('click', function (paramers) {
   var data = paramers.data;
   var node = data.node;

   // key:id1, title:item1 with key and tooltip, tooltip:Look, a tool tip!, icon:line.png
   console.log("key:" + node.key + ", title:" + node.title + ", tooltip:" + node.tooltip + ", icon:" + node.icon);
 }, treeview);

遍历节点

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

      var dataSource = [
      {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!", icon: "line.png"},
      {key: "id2", title: "item2", selected: true, icon: "point.png"},
      {
        key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
        {
          key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [
          {key: "id3.1.1", title: "Sub-item 3.1.1", icon: "line.png"},
          {key: "id3.1.2", title: "Sub-item 3.1.2", icon: "polygon.png"},
        ],
        },
        {
          key: "id3.2", title: "Sub-item 3.2", folder: true,
          children: [
            {key: "id3.2.1", title: "Sub-item 3.2.1"},
            {key: "id3.2.2", title: "Sub-item 3.2.2"},
          ],
        },
        {key: "id3.3", title: "Sub-item 3.3", icon: "polygon.png"},
      ]
      },
    ];

    var treeview = new KQ.ui.TreeView('treeview', {source: dataSource, imagePath: "../../images/"});
    var keys = [];
    treeview.visit(function (node) {
      keys.push(node.key);
    });

    // id1, id2, id3, id3.1, id3.1.1, id3.1.2, id3.2, id3.2.1, id3.2.2, id3.3
    console.log(keys.join(", "));

延迟加载

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

       // 注意: 这里lazy设置为true,才会延迟加载
   var source = [
       {title: "item1", key: "item1", folder: true, lazy: true},
       {title: "item2", key: "item2", folder: true, lazy: true},
       {title: "item3", key: "item3", folder: true, lazy: true},
   ];
   var treeview = new KQ.ui.TreeView('treeview', {source: source});

   // node代表当前点击的节点, 返回值是子项的数组(该数组也可以通过ajax远程得到)
   treeview.subItemsLazyLoadFn(function (node) {
     if (node.key === "item1"){
       return [{title: "sub_item1_1"}, {title: "sub_item1_2"}];
     }else if (node.key === "item2"){
       return [{title: "sub_item2_1"}, {title: "sub_item2_2"}];
     }else if (node.key === "item3"){
       return [{title: "sub_item3_1"}, {title: "sub_item3_2"}, {title: "sub_item3_3"}];
     }
   });

    结果：

result-3

TreeViewNode的使用

  1. 在html文件中添加如下代码：

    <div id="treeview"></div>

  2. 在js文件中添加如下代码：

       var dataSource = [
        {key: "id1", title: "item1 with key and tooltip", tooltip: "Look, a tool tip!"},
        {key: "id2", title: "item2"},
        {
          key: "id3", title: "Folder <em>with some</em>", folder: true, expanded: true, children: [
          {
            key: "id3.1", title: "Sub-item 3.1", folder: true, expanded: true, children: [
            {key: "id3.1.1", title: "Sub-item 3.1.1"},
            {key: "id3.1.2", title: "Sub-item 3.1.2"},
          ],
          },
          {
            key: "id3.2", title: "Sub-item 3.2", folder: true,
            children: [
              {key: "id3.2.1", title: "Sub-item 3.2.1"},
              {key: "id3.2.2", title: "Sub-item 3.2.2"},
            ],
          },
          {key: "id3.3", title: "Sub-item 3.3"},
        ]
        },
      ];

      var treeview = new KQ.ui.TreeView("treeview",  {source: dataSource, checkbox: true});
      var treeViewNode = treeview.getNodeByKey('id3.1');

      console.log(treeViewNode.isExpanded());         // true
      console.log(treeViewNode.isFolder());           // true
      console.log(treeViewNode.isSelected());         // false

      treeViewNode.setSelected(true);
      console.log(treeViewNode.isSelected());         // true

Window

在屏幕上显示一个可移动，可缩放的窗口。它可以有一个标题和一个关闭按钮。

参考： Window

添加窗口

在新窗口中显示定制内容：

  1. 找到文件夹并打开它：'kqwebmap/window'。

  2. 添加新文件：'example.html'。

    <div id="example">
<div id="window">
 <div class="armchair">
   <img src="http://lorempixel.com/199/194" alt="Artek Alvar Aalto - Armchair 402"/> Artek Alvar Aalto - Armchair 402
 </div>
 <p>Alvar Aalto is one of the greatest names in modern architecture and design. 
 Glassblowers at the iittala factory still meticulously handcraft the legendary vases that are variations on one theme, 
 fluid organic shapes that let the end user decide the use. 
 Interpretations of the shape in new colors and materials add to the growing Alvar Aalto Collection 
 that remains true to his original design.</p>

 <p>Born Hugo Alvar Henrik Aalto (February 3, 1898 - May 11, 1976) in Kuortane, Finland, 
 was noted for his humanistic approach to modernism. He studied architecture at the Helsinki University of 
 Technology from 1916 to 1921. In 1924 he married architect Aino Marsio.</p>

 <p>Alvar Aalto was one of the first and most influential architects of the Scandinavian modern movement, 
 and a member of the Congres Internationaux d'Architecture Moderne. 
 Major architectural works include the Finlandia Hall in Helsinki, Finland, 
 and the campus of Helsinki University of Technology.</p>

 <p>Source: <a href="http://www.aalto.com/about-alvar-aalto.html" title="About Alvar Aalto">www.aalto.com</a></p>
</div>

<span id="undo" style="display:none" class="k-button hide-on-narrow">Click here to open the window.</span>

<div class="responsive-message"></div>

<button id="button" type="button" onclick="onExampleButtonClick()">Button</button>

<script>
 function onExampleButtonClick () {
   console.log('onExampleButtonClick!');
 }
</script>

<style>
 #undo {
   text-align: center;
   position: absolute;
   white-space: nowrap;
   padding: 1em;
   cursor: pointer;
 }

 .armchair {
   float: left;
   margin: 30px 30px 120px 30px;
   text-align: center;
 }

 .armchair img {
   display: block;
   margin-bottom: 10px;
   width: 199px;
   height: 194px;
 }

 @media screen and (max-width: 500px) {
   div.k-window {
     display: none !important;
   }
 }
</style>
</div>

  3. 在JS文件中添加代码：

    KQ.Common.CommonTools.loadUiLib(function () {
var win = new KQ.Control.Window('example', {
parentID: 'map',
position: {
 left: '100px',
 top: '100px',
},
});

win.initAsync();
win.open();
});

结果：

result