uiZjs入门

具体基础的用法，可先看下这个文件做下了解，地址：http://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” ，大家都懂得，用起来简单的东西，都有一些强制的规定

需要注意的是：

readonly的input不会传给服务器 

password的input传回服务器的是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;
}