1.第一步,引用相关的JS或CSS
引用JqueryMobile.min,js
引用Jquery.js(引用Jquery.WebSocket.js(Socket通信必备)
引用Model.js/apiData.js(这两个是我这边的自定义的,和我这边的服务端通信有关,这两者一定要遵从某些协定/标准/规则,双方有一方不同就无法进行指定的交互)引用其他........等等
2.第二步,在HTML页面中定义Jquery方法实现数据接收
1.首先创建JavaScript标签。
<script type="text/javascript"></script>
2.在JavaScript标签中创建网页加载完成后立马加载相关数据的方法,ready方法(文档即document加载后立马触发该方法),
里面的step是自定义方法。
function step() {
for (var i = 0; i < steps.length; i++) {
方法内容xxx;
}
$(document).ready(function () {
step();
});
3.服务器发送的数据一定有一个与之对应的本地JS与其交互,找到该交互JS(这是本地的),
然后找到你需要时用到的接收方法(一般的都是以OnResponse之类的名称开头),
然后在该方法中获取对象(获取不到那还玩个P),该对象就是服务器端发给你的。
4.找到你的table标签,我这里没有使用table,直接使用了tbody,然后给其添加id或者class属性,以便在之后的JS调用(注意:id最好是唯一的,class的话视情况而定)
5.回到JS中,开始进行正式操作:
1)首先要定义一个map,定义在JavaScript标签中
///用来去掉重复数据
var map = {};
2)在响应方法中接受服务器发送的对象并对该对象其进行解析:
3)我这里有个connection方法,意思是当和服务器连接成功,改变某标签的底色,失败时,改变底色。
4)OnOrder方法是我们要处理数据的方法,其详细说明在注释中。
var orderOK= $.order("ws://127.0.0.1:22222/", {
OnConnected: function () {
//连接成功
$("#TD_States_A").css("color", "#black");
$("#TD_States_A").css("background-color", "#00EC00");
$("#TD_States_B").text("成功");
$("#TD_States_B").css("color", "#black");
$("#TD_States_B").css("background-color", "#00EC00");
},
OnOrder: function (r) {
//存在该行
//table中存在该行,我们就需要处理,这时候我们需要用到对象R,对象r是服务器依次发送过来的对象,它们都具有ID且唯一的,
//我们知道了map中存在该行,所有要用each方法是遍历该行,获取其中的某些列
//即td,并对td进行遍历,i是遍历次数,如果i=0,则走需要处理的第一列,这里用statesDisk方法处理第一列,其余列类推
//注意,你要替换的td要和遍历次数对应上,不然会产生错误的,我这里要替换3个,所以你要写3个switch,当然还有其他方法,
//依个人爱好,假如你的td需要添加button_Click方法,就按照我下面的写,是没有问题的。
if (map[r.data.ID] != undefined) {
$("#row" + r.data.ID + " .up").each(function (i) {
switch (i) {
case 0:
$(this).text(statesDisk(r.data.OrderStatus));
break;
case 1:
xxx2;
break;
case 2:
xxx3;
break;
}
});
} else {
//不存在该行,即map中不存在该对象,我们就要在table中创建该行,那么创建的时候我们要为每一行指定一个独一无二的id
//我创建的td中都调用了RISK方法,这里的Risk(r.data.d) 意思是将该对象的指定属性进一步处理,
//比如说对R的d属性进行四舍五入转换等等
//核心点在 class='UP'这里,这里标明了当前对象(行)那些会产生冲突,这里我们用 class="up"标记了该列可能会改变
var tr = "<tr id='row" + r.data.ID+ "'>" +
"<td > " + Risk(r.data.D) + "</td>" +
"<td class='up'> " + StatesDisk(r.data.OrderStatus) + "</td>" +
"<td > " + r.data.Price + "</td>" +
"<td > " + r.data.Volume + "</td>" +
"<td class='up'> " + r.data.abc+ "/" + r.data.def + "</td>" +
"<td class='up'> " + r.data.mes+ "</td>" +
"<td ><a href='#' data-iconpos='notext' data-role='button' data-icon='grid' οnclick='del(this)'>点击</a></td>" +
"</tr>";
$("#usertable tbody").append(tr);
map[r.data.ID] = r.data.ID;
}
},
events: {
xxx;
}
});
6.在上述table中添加del方法,在页面上删除该行,这里没有实现在数据库中得删除,可以自行添加。
///table删除按钮
function del(obj) {
var trId = obj.parentNode.parentNode.id; //获取当前元素的父节点的父节点的id,即要删除的行的id
var trObj = document.getElementById(trId);
document.getElementById("table_tbody").removeChild(trObj);
}