wex5实现类似微信通讯录对人进行a-z人名首字母分组效果,点击右侧字母，跳转到对应字母

实现类似微信通讯录对人进行a-z人名首字母分组效果。

1.

在data1中加入groupL字段（字段名随意），字段内容是服务端遍历进去的该条数据人名的首字母。

 

 

 

<!--[if !supportLists]-->2.<!--[endif]-->新建一个data2，groupName就是a-z和#，最多是27条数据。

 

 

 

3.list2设置过滤器filter属性 $row.val(‘groupL’) == val（‘groupName’） ,过滤出list2(即data1)的groupL字段与list1（即data2）中groupName相同的字段。

 

 

 

<!--[if !supportLists]-->4.<!--[endif]-->后台代码

 /** 

 * 查询结果转换为.w文件能读取的jsondata格式

 * */

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

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

//声明列名

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

//JSONObject json = new JSONObject();

//json 包括查出的数据jsTable  和  首字母集合groupN

JSONObject jsTable = new JSONObject();

//List groupN = new ArrayList();

//第一部分

// "@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中内容根据实际样式情况随意写）

<div class="x-key-index" align="right" xid="x-key-index" style="z-index:5;position:relative;float:right;width:3%;"> 

        <div class="info" />  

        <ul data-bind="foreach: keys" style="text-align:center;"> 

          <li class="x-key-item" data-bind="text:$object" dir="ltr"  style="font-size:small;"/> 

        </ul> 

      </div>

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

<div component="$UI/system/components/justep/output/output" class="x-output" xid="output4" data-bind="attr:{id:val('groupName')}" bind-ref="ref('groupName')"></div>

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

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

<a xid="a1" href="#"></a>

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-#显示不全