第一組：楊昊 微信小程序小程序頁面節(jié)點(diǎn)最大數(shù)量
做前端開發(fā)的同學(xué)，都遇到過頁面節(jié)點(diǎn)過多，從而導(dǎo)致頁面加載很慢，或者瀏覽器直接崩潰。
在小程序開發(fā)中，下拉刷新數(shù)據(jù)的用法應(yīng)該比較多，那么小程序頁面節(jié)點(diǎn)最大數(shù)量又是多大呢？
在網(wǎng)上查了一下，看了看前輩們踩的坑，發(fā)現(xiàn)大量數(shù)據(jù)直接扔到小程序模板里面去遍歷(wx:for)，開發(fā)者工具的日志里面有可能直接報(bào)錯(cuò)：invokeWebviewMethod 數(shù)據(jù)傳輸長度為 1233778 已經(jīng)超過最大長度 1048576
至于為什么是1048576這個(gè)長度，恐怕要問微信團(tuán)隊(duì)的底層實(shí)現(xiàn)了，應(yīng)該是考慮到性能問題，不允許一次性加載這么多節(jié)點(diǎn)到頁面上~
注：巧的是1048576B=1M，excel的最大行數(shù)也是1048576行，也許微信這個(gè)節(jié)點(diǎn)長度用這個(gè)值是經(jīng)過考慮之后的一個(gè)值。
第二組：葉佳意 ECharts使用
ECharts，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome，F(xiàn)irefox，Safari等），底層依賴輕量級的矢量圖形庫 ZRender，提供直觀，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。
使用ECharts畫圖表步驟如下：
一、獲取 ECharts
你可以通過以下幾種方式獲取 ECharts。
1、從官網(wǎng)下載界面選擇你需要的版本下載，根據(jù)開發(fā)者功能和體積上的需求，我們提供了不同打包的下載，如果你在體積上沒有要求，可以直接下載完整版本。開發(fā)環(huán)境建議下載源代碼版本，包含了常見的錯(cuò)誤提示和警告。
2、在 ECharts 的 GitHub 上下載最新的 release 版本，解壓出來的文件夾里的 dist 目錄里可以找到最新版本的 echarts 庫。
3、通過 npm 獲取 echarts，npm install echarts --save。
4、cdn 引入，你可以在 cdnjs，npmcdn 或者國內(nèi)的 bootcdn 上找到 ECharts 的最新版本。
二、引入 ECharts
ECharts 3 開始不再強(qiáng)制使用 AMD 的方式按需引入，代碼里也不再內(nèi)置 AMD 加載器。因此引入方式簡單了很多，只需要像普通的 JavaScript 庫一樣用 script 標(biāo)簽引入。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<!-- 引入 ECharts 文件 -->
<script src="echarts.min.js"></script></head></html>
三、繪制一個(gè)簡單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個(gè)具備高寬的 DOM 容器。
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div></body>
然后就可以通過 echarts.init 方法初始化一個(gè) echarts 實(shí)例并通過 setOption 方法生成一個(gè)簡單的柱狀圖，下面是完整代碼。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script></head><body>
<!-- 為ECharts準(zhǔn)備一個(gè)具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script></body></html>
這樣你的第一個(gè)圖表就誕生了！
第三組： Ajax 返回任意類型值
在使用Ajax過程中，有的方法需要傳回string，有的要傳回model或model[]；但是在我們最開始設(shè)置返回值result的時(shí)候只能設(shè)置一種類型，那這樣返回不同類型的值就得新建一個(gè)一般處理程序，這樣就會(huì)顯得很不簡潔。
那在設(shè)置返回值result的時(shí)候有沒有一種可以設(shè)置成任意類型的方法呢?
答案是有，AjaxResult就能做到。
public class PmAsCheckTaskList: BaseHandler {
public static AjaxResult result = new AjaxResult() {
IsSuccess = true;
};
public override void ProcessRequest(HttpContext context) {
try {
switch (context.Request["method"].ToLower()) {
//獲得檢查條目 輸入?yún)?shù) 標(biāo)簽 返回 Tid 條目 依據(jù)
case "getjctm":
result = GetJctmListBySepara(context);
break;
}
} catch(Exception e) {
//日志記錄
result.IsSuccess = false;
result.Message = e.Message;
}
context.Response.Write(result.ToJson());
}
//獲得檢查條目 輸入?yún)?shù) 標(biāo)簽 返回 Tid 條目 依據(jù)
public AjaxResult GetJctmListBySepara(HttpContext context) {
LoongAir.Model.PmAsCheckEntry[] insPace = new PmAsCheckEntry[] {};
//標(biāo)簽篩選分支
//選擇標(biāo)簽返回默認(rèn)帶出的檢查條目 Tid數(shù)組
string labels = context.Request["labels"];
if (labels != null) {
//選擇的關(guān)系運(yùn)算符
string relchr = string.IsNullOrEmpty(context.Request["relchr"]) ? "||": context.Request["relchr"];
long[] labelTids = Array.ConvertAll(labels.Trim(',').Split(','), s = >s.ToLong());
insPace = LoongAir.DB.PmAsCheckEntry.QueryEntryByMutiLabelsAndRelChr(labelTids, relchr);
}
//條目內(nèi)容篩選分支
string entrycontent = context.Request["entrycontent"];
if (entrycontent != null) {
insPace = LoongAir.DB.PmAsCheckEntry.selectEntries(loginUser, null, new LoongAir.Model.PmAsCheckEntry() {
PmAsCheckEntryContent = entrycontent
});
}
//返回 檢查條目的Tid 條目 依據(jù)
//PmAsCheckEntryContent PmAsCheckAccordance
DataTable dt = new DataTable();
dt.Columns.Add("Tid", typeof(string));
dt.Columns.Add("PmAsCheckEntryContent", typeof(string));
dt.Columns.Add("PmAsCheckAccordance", typeof(string));
foreach(var ins in insPace) {
DataRow dr = dt.NewRow();
dr["Tid"] = ins.Tid;
dr["PmAsCheckEntryContent"] = ins.PmAsCheckEntryContent;
dr["PmAsCheckAccordance"] = ins.PmAsCheckAccordance;
dt.Rows.Add(dr);
}
result.Data = dt;
return result;
}
另外，如果我們需要從兩張表里分別選幾個(gè)字段拼成一個(gè)類似于視圖一樣的表，在這里，用DataTable直接拼接就可以做到。
第四組：李俊 窗體設(shè)計(jì)中設(shè)置表格某一列數(shù)據(jù)長度
在GridView表格當(dāng)中新增數(shù)據(jù)時(shí)，由于所有數(shù)據(jù)最終都要存入數(shù)據(jù)庫中，而數(shù)據(jù)庫表中對每個(gè)字段的數(shù)據(jù)長度進(jìn)行了設(shè)置，如果對新增數(shù)據(jù)在前臺不進(jìn)行數(shù)據(jù)限制的話，在插入數(shù)據(jù)庫的時(shí)候就會(huì)出錯(cuò)。因此，需要對GridView中單元格的數(shù)據(jù)長度進(jìn)行設(shè)置，超過則提示過長，并且返回原值（修改時(shí)返回修改前的數(shù)據(jù)，新增時(shí)返回空數(shù)據(jù)）：
/// <summary>
/// 數(shù)據(jù)長度檢
/// </summary>
/// <param name="data">數(shù)據(jù)</param>
/// <param name="lengthLimit">長度限制</param>
/// <param name="caption">列名</param>
private void checkDataLength(string data, int lengthLimit, string caption, int row, string column)
{
if (data.Length > lengthLimit)
{
XtraMessageBox.Show(caption + "不能超過" + lengthLimit + "個(gè)字符");
//返回原值
UIT4007 ACTypeInfo = new UIT4007();
Loc.Support.GetT4007SearchPara SearchParam = new Loc.Support.GetT4007SearchPara
{
UIT_Model = ACTypeInfo
};
UIModelListResult<UIT4007> originalData = DispatchHandler.GetAcTypeList(SearchParam);
//對原數(shù)據(jù)進(jìn)行更改失敗的時(shí)候返回原值
if (row < originalData.List.Length)
{
//取對應(yīng)字段的值
Model.UIT4007 test = originalData.List[row];
string testValue = "";
Type type = typeof(Model.UIT4007);
System.Reflection.PropertyInfo property = type.GetProperty(column);
if (property != null)
{
object o = property.GetValue(test, null);
testValue = (o == null ? "" : o.ToString());
}
//修改失敗的單元格數(shù)據(jù)重新返回原值，方法是通過以原值進(jìn)行賦值
gridView1.SetRowCellValue(row, column, testValue);
gridView1.RefreshRow(row);
}
//在新增數(shù)據(jù)過程中，對單元格增加失敗時(shí)返回單元格最初空值狀態(tài)
else
{
gridView1.SetRowCellValue(row, column, "");
gridView1.RefreshRow(row);
}
}
}
第五組：周倩宇 AngularJS 過濾器
過濾器可以使用一個(gè)管道字符（|）添加到表達(dá)式和指令中。可用于轉(zhuǎn)換數(shù)據(jù)：
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數(shù)字為貨幣格式。 |
| filter | 從數(shù)組項(xiàng)中選擇一個(gè)子集。 |
| lowercase | 格式化字符串為小寫。 |
| orderBy | 根據(jù)某個(gè)表達(dá)式排列數(shù)組。 |
| uppercase | 格式化字符串為大寫。 |
uppercase，lowercase 大小寫轉(zhuǎn)換
{{ "lower cap string" | uppercase }} // 結(jié)果：LOWER CAP STRING
{{ "TANK is GOOD" | lowercase }} // 結(jié)果：tank is gooddate 格式化
{{1490161945000 | date:"yyyy-MM-dd HH:mm:ss"}} // 2017-03-22 13:52:25number 格式化（保留小數(shù)）
{{149016.1945000 | number:2}}currency貨幣格式化
{{ 250 | currency }} // 結(jié)果：$250.00
{{ 250 | currency:"RMB ￥ " }} // 結(jié)果：RMB ￥ 250.00filter查找：輸入過濾器可以通過一個(gè)管道字符（|）和一個(gè)過濾器添加到指令中，該過濾器后跟一個(gè)冒號和一個(gè)模型名稱。filter 過濾器從數(shù)組中選擇一個(gè)子集
// 查找name為iphone的行
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | filter:{'name':'iphone'} }}limitTo 截取
{{"1234567890" | limitTo :6}} // 從前面開始截取6位
{{"1234567890" | limitTo:-4}} // 從后面開始截取4位-
orderBy 排序
// 根id降序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id':true }}// 根據(jù)id升序排
{{ [{"age": 20,"id": 10,"name": "iphone"},
{"age": 12,"id": 11,"name": "sunm xing"},
{"age": 44,"id": 12,"name": "test abc"}
] | orderBy:'id' }}
數(shù)據(jù)來源：http://www.runoob.com/angularjs/angularjs-filters.html
