第一組：楊昊 微信小程序小程序頁面節(jié)點最大數(shù)量
做前端開發(fā)的同學(xué)惋啃，都遇到過頁面節(jié)點過多，從而導(dǎo)致頁面加載很慢监右，或者瀏覽器直接崩潰边灭。
在小程序開發(fā)中，下拉刷新數(shù)據(jù)的用法應(yīng)該比較多健盒，那么小程序頁面節(jié)點最大數(shù)量又是多大呢绒瘦？
在網(wǎng)上查了一下，看了看前輩們踩的坑扣癣，發(fā)現(xiàn)大量數(shù)據(jù)直接扔到小程序模板里面去遍歷(wx:for)惰帽，開發(fā)者工具的日志里面有可能直接報錯：invokeWebviewMethod 數(shù)據(jù)傳輸長度為 1233778 已經(jīng)超過最大長度 1048576
至于為什么是1048576這個長度，恐怕要問微信團(tuán)隊的底層實現(xiàn)了父虑，應(yīng)該是考慮到性能問題该酗，不允許一次性加載這么多節(jié)點到頁面上~
注：巧的是1048576B=1M，excel的最大行數(shù)也是1048576行士嚎，也許微信這個節(jié)點長度用這個值是經(jīng)過考慮之后的一個值呜魄。
第二組：葉佳意 ECharts使用
ECharts，一個使用 JavaScript 實現(xiàn)的開源可視化庫莱衩，可以流暢的運行在 PC 和移動設(shè)備上爵嗅，兼容當(dāng)前絕大部分瀏覽器（IE8/9/10/11，Chrome笨蚁，F(xiàn)irefox睹晒，Safari等）趟庄，底層依賴輕量級的矢量圖形庫 ZRender，提供直觀伪很，交互豐富岔激，可高度個性化定制的數(shù)據(jù)可視化圖表。
使用ECharts畫圖表步驟如下：
一是掰、獲取 ECharts
你可以通過以下幾種方式獲取 ECharts虑鼎。
1、從官網(wǎng)下載界面選擇你需要的版本下載键痛，根據(jù)開發(fā)者功能和體積上的需求炫彩，我們提供了不同打包的下載，如果你在體積上沒有要求絮短，可以直接下載完整版本江兢。開發(fā)環(huán)境建議下載源代碼版本，包含了常見的錯誤提示和警告丁频。
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>
三我衬、繪制一個簡單的圖表
在繪圖前我們需要為 ECharts 準(zhǔn)備一個具備高寬的 DOM 容器。
<body>
<!-- 為 ECharts 準(zhǔn)備一個具備大斜钙琛（寬高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div></body>
然后就可以通過 echarts.init 方法初始化一個 echarts 實例并通過 setOption 方法生成一個簡單的柱狀圖低飒，下面是完整代碼。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.min.js"></script></head><body>
<!-- 為ECharts準(zhǔn)備一個具備大卸巍（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom褥赊，初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數(shù)據(jù)
var option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script></body></html>
這樣你的第一個圖表就誕生了莉恼！
第三組： Ajax 返回任意類型值
在使用Ajax過程中拌喉，有的方法需要傳回string速那，有的要傳回model或model[]；但是在我們最開始設(shè)置返回值result的時候只能設(shè)置一種類型尿背，那這樣返回不同類型的值就得新建一個一般處理程序端仰，這樣就會顯得很不簡潔。
那在設(shè)置返回值result的時候有沒有一種可以設(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)系運算符
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;
}
另外，如果我們需要從兩張表里分別選幾個字段拼成一個類似于視圖一樣的表汽久，在這里鹤竭，用DataTable直接拼接就可以做到。
第四組：李俊 窗體設(shè)計中設(shè)置表格某一列數(shù)據(jù)長度
在GridView表格當(dāng)中新增數(shù)據(jù)時景醇，由于所有數(shù)據(jù)最終都要存入數(shù)據(jù)庫中臀稚，而數(shù)據(jù)庫表中對每個字段的數(shù)據(jù)長度進(jìn)行了設(shè)置，如果對新增數(shù)據(jù)在前臺不進(jìn)行數(shù)據(jù)限制的話三痰，在插入數(shù)據(jù)庫的時候就會出錯吧寺。因此，需要對GridView中單元格的數(shù)據(jù)長度進(jìn)行設(shè)置散劫，超過則提示過長稚机，并且返回原值（修改時返回修改前的數(shù)據(jù)，新增時返回空數(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 + "個字符");
//返回原值
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)行更改失敗的時候返回原值
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ù)過程中抒钱，對單元格增加失敗時返回單元格最初空值狀態(tài)
else
{
gridView1.SetRowCellValue(row, column, "");
gridView1.RefreshRow(row);
}
}
}
第五組：周倩宇 AngularJS 過濾器
過濾器可以使用一個管道字符（|）添加到表達(dá)式和指令中⊙湛可用于轉(zhuǎn)換數(shù)據(jù)：
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數(shù)字為貨幣格式。 |
| filter | 從數(shù)組項中選擇一個子集仗扬。 |
| lowercase | 格式化字符串為小寫症概。 |
| orderBy | 根據(jù)某個表達(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查找：輸入過濾器可以通過一個管道字符（|）和一個過濾器添加到指令中，該過濾器后跟一個冒號和一個模型名稱退个。filter 過濾器從數(shù)組中選擇一個子集
// 查找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
