Wex5 realizes the effect of grouping the initials of az names on people similar to WeChat address book, click the letter on the right to jump to the corresponding letter

It realizes the effect of grouping people's initials by az , similar to the WeChat address book .

Add the groupL field to data1 (the field name is arbitrary), and the content of the field is the first letter of the name of the data traversed by the server.

2.  Create a new data2 , groupName is az and # , up to 27 pieces of data.

3. List2 sets the filter attribute $row.val( ' groupL ' ) == val ( ' groupName ' ) , and filters out the groupL field of list2 ( ie data1) and the same field of groupName in list1 (ie data2 ) .

4.  Backend code

/**

* The query results are converted into jsondata format that can be read by .w files

* */

publicstatic JSONObject toJSON(Integer limit,Integer offset,List<Map<String, Object>> list){

//fellowbookList = this.userService.searchThinkFellowbookList(this.param);

// declare the column name

String[] column = {"user_id","real_name","loginname","phone_number","token_id","ente_id","ente_name","groupL"};

//JSONObject json = new JSONObject();

// json includes the detected data jsTable and initial set groupN

JSONObject jsTable = new JSONObject();

//List groupN = new ArrayList();

// first part

// "@type" - 类型标识，"table"表明这个JSON是一个table结构的数据

jsTable.put("@type", "table");

//第二部分 // "userdata" - table的元信息

JSONObject jsUserData = new JSONObject();

jsUserData.put("idColumnName", "user_id");//ID列的名称

jsUserData.put("idColumnType", "String");//ID列的数据类型

/**********可以在下面列定义中包含包含ID列，并忽略ID列定义**********/

// "relationAlias" - 列名，以逗号分隔

String relationAlias = "";

String relationTypes = "";

for(int i = 0 ;i<column.length;i++){

relationAlias += column[i]+",";//+","+column[1]+","+column[2]+","+column[3];

relationTypes += "String,";

}

relationAlias = relationAlias.substring(0,relationAlias.length()-1);

relationTypes = relationTypes.substring(0,relationTypes.length()-1);

jsUserData.put("relationAlias", relationAlias);

// "relationTypes" - 列数据类型，与上面的列名对应，

// 支持的类型有String、Integer、Long、Float、Double、Decimal、Boolean、Date、Time、DateTime

jsUserData.put("relationTypes", relationTypes);

// "sys.count" - 总行数，用于分页的页数计算，仅当返回第一页数据（offset==0）时需要返回总行数

int count = list.size();

jsUserData.put("sys.count", count);

//第三部分 // "rows" - 行数据数组

JSONArray jsRows = new JSONArray();

// 第一行数据，每一行数据都是一个JSON结构

//分页

if(limit !=null && offset!=null){

int a = count-offset;

if(a>=limit){

count = limit+offset;

}else{

count = a+offset;

}

}else{

offset = 0;

}

for(int i=0;i<count;i++){

Map<String,Object> userMap = list.get(i);

if(userMap==null){

break;

}

JSONObject jsRow = new JSONObject();

JSONObject rowValue = new JSONObject();

for(int j=0;j<column.length;j++){

//如果值没有变化，则执行

rowValue = new JSONObject();

String columnvalue = "";

if("groupL".equals(column[j])){

columnvalue = ChineseToPinYin.getPinYinHeadChar(userMap.get("real_name").toString()).substring(0,1);

System.out.println("人名首字母："+columnvalue);

//①构造一个模式.

Pattern p=Pattern.compile("[^a-z]");

//②建造一个匹配器

Matcher m = p.matcher(columnvalue);

//③进行判断，得到结果

boolean b = m.matches();

if(b){

columnvalue = "#";

}

//groupN.add(columnvalue);

}else{

if("".equals(userMap.get(column[j]))||userMap.get(column[j])==null){

columnvalue = "";

}else{

columnvalue=userMap.get(column[j]).toString();

}

rowValue.put("value", columnvalue);

jsRow.put(column[j], rowValue);

System.out.println("列名+value值:"+column[j]+",value:"+columnvalue);

}

//rowValue = new JSONObject();

//rowValue.put("recordState", "none");

//jsRow.put("userdata", rowValue);

System.out.println("jsRow:"+jsRow);

jsRows.add(jsRow);

}

System.out.println("jsRows:"+jsRows);

jsTable.put("userdata", jsUserData);

jsTable.put("rows", jsRows);

System.out.println("jsTable:"+jsTable);

//json.put("jsTable", jsTable);

//json.put("groupN", groupN)

return jsTable;

}

5.效果（没有数据的字母隐藏待改进，只实现基本功能）

********更新2：实现右侧字母列表点击跳转到对应字母*********

6.加入右侧字母列表

js中加入this.keys：

var Model = function(){

this.callParent();

this.keys = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y',

'z' ,'#'];

};

源码中加入：（style中内容根据实际样式情况随意写）

</ul>

</div>

7. 主list1中的output 编辑其源码

加入data-bind="attr:{id:val('groupName')}" 动态设置id属性为当前遍历的字母（如‘a’），用于后边a标签href定位，组件不能支持直接写id。

8.加入组件a标签(随意位置，不让他显示只为后边做click事件)

9.为右侧边栏li标签设置click事件

Model.prototype.li3Click = function(event){

var self = this;

var data2 = self.comp('data2');

var row = event.bindingContext.$object;/*获得当前点击li标签的字母*/

var rows = data2.find(['groupName'], [row]);

if(rows.length>0){/*如果数据库有该字母则为a标签赋值并触发click事件*/

var togroup = this.getElementByXid("a1");

togroup.setAttribute("href","#"+row);

togroup.click();

}

};

***************目前还存在的问题****************

右侧边栏的字母可能会超过手机屏幕的长度，造成a-#显示不全

Wex5 realizes the effect of grouping the initials of az names on people similar to WeChat address book, click the letter on the right to jump to the corresponding letter

Guess you like