uiZjs入门

具体基础的用法,可先看下这个文件做下了解,地址:https://files.cnblogs.com/dachuang/uizjs.rar

请先看完上面的文件,不然下面的可能看不懂,当然你要是之前了解过的话没问题

下面说下简单的总结:

1.先说列表页:

uizjs就是自造一个table,这个table是以一个自造的行模板来依次复制出来的,所以uizjs就是定义出一个行模板,这里有两种方式:一种是直接用js定义模板格式,一种是用html定义模板

第一种:(这是公司的一个高手写的,我没看明白,你也看不懂的话,直接第二种)

var paratable = {
"body": "#lst", "key": "DataList", "ulstr": "tr", "listr": "td", "para": para,
"keyc": ["Id", "Title"],
"cols": ['<input class="limt-check" type="checkbox"/>', "Title,align-l", "Stock", "Istop,,sf"],
"getcmd": "/CMS/Product/List",
"buttons": {
"推送": {
"prompt": true, "click": function (p) {
zjs.cmd({
cmd: "/CMS/AppPush/Add",
para: {
"PushContent": p.para.id1,
"Url": "<%="http://"+KNET.WAWP.Logical.Library.App+KNET.WAWP.Logical.Library.MyDomain%>/Mobile/Product/details.aspx?id=" + p.para.id
},
callback: function () {
// $(this).html("已推送");
}
});
}, "clas": "btn-cotr cotr-gavy"
},
"修改": { "url": "/CMS/Function/Product/Add.aspx?id=#Id#", "alert": true, "alertwidth": "800px", "clas": "btn-cotr cotr-gavy" },
"删除": { "cmd": "/cms/Product/DeleteByID", "clas": "btn-cotr cotr-gavy", "confirm": "确认要删除吗?" }
},
"callback": function (e, data) {
Research();
}, "getcallback": function (e, data) {
if (BaseCategory.CurrID) {
BaseCategory.UpdateBut(this.TotalRows, BaseCategory.CurrID);
} else {
BaseCategory.Init("<%=KNET.WAWP.Logical.ViewModel.CategoryType.Products %>", "新建分类", 0);
}
}
};

第二种:(比较容易理解,就是我们平常用的html)

模板html:

<tbody id="lst">
<tr class="uls" style="z-index: 300;" id="tr#Id#">
<td class="align-l">#Title#</td>
<td>#Discount#%</td>
<td><span>#StartDate#</span>至<span>#EndDate#</span></td>
<td>#CreateDate#</td>
<td class="tbody_btns"><a class="btn-cotr cotr-gavy" title="编辑" owidth="500px" oheight="400px" openurl="/cms/Promotion/adddiscount.aspx?id=#Id#">编辑</a><a class="btn-cotr cotr-yellow" title="删除" execcmd="/Promotion/SalesRule/Delete" callback="Research" data-id="#Id#" confirm="确定要删除吗?">删除</a></td>
</tr>
</tbody>

配合的js:

window.ctable = new window.zjs.ctable({
"body": "#lst",
"getcmd": "/Promotion/SalesRule/ListPage",
"para": para,
"isTemplate": true,
dateformat: "yyyy-MM-dd"
});

2.接下来说添加/编辑页面,就是提交表单的页面:

这里有个强制的要求:

form的class必须cform, 提交按钮必须为a,且必须id=”submit” ,大家都懂得,用起来简单的东西,都有一些强制的规定

需要注意的是:

readonlyinput不会传给服务器 

passwordinput传回服务器的是md5过的

直接例子:

 

<form id="WLK_WAWP_BASE_ENTERPRISE_INFO" class="cform" cmds="/Promotion/SalesRule/Detail" cmdu="/Promotion/SalesRule/Update" cmdi="/Promotion/SalesRule/Add" setcallback="close()" before="dateValidation" dateformat="yyyy-MM-dd">
<input id="Id" type="hidden" value="<%=Request["id"] %>" />
<input id="SalesType" type="hidden" value="1" />
<div class="pop-div">
<div class="">
<ul class="ul-form promotion">
<li>
<label>活动标题<span class="imprt">*</span></label>
<input type="text" class="form-control promotion-title" id="Title" rule="required;length:40:2" />
</li>
<li>
<label>促销折扣<span class="imprt">*</span></label>
<input type="text" class="form-control discount" id="Discount" rule="required;number;integer;gt:1;lt:99" />
%
</li>
<li>
<label>促销时间<span class="imprt">*</span></label>
<input type="text" class="form-control promotion-start promotion-date" id="StartDate" readonly="readonly" rule="required;">&nbsp;&nbsp;至&nbsp;
<input type="text" class="form-control promotion-end promotion-date" id="EndDate" readonly="readonly" rule="required;">
</li>
<li class="putbox">
<a class="btn btn-green btn-small" id="submit">提交</a>
<a class="btn btn-gavy btn-small" href="javascript:closefast();">取消</a>
</li>
</ul>
</div>
</div>
</form>

 用到的js(before里的函数)

window.dateValidation = function () {
var validate = dateComparison($startCreateDate.val(), $endCreateDate.val());
if (!validate) {
alert('结束时间必须晚于开始时间!');
}
return validate;
}

posted @ 2015-01-15 16:47  卡萨丁·周  阅读(402)  评论(0编辑  收藏  举报