为方便大家调用JS,CSS特编写此文档!红色代表该插件必须引用的文件
//只需要给Text文本框增加一个data-control="time"就可以了 <input type="text" class="form-control start" data-control="time" placeholder="选择时间" />
<input type="text" class="form-control start" placeholder="选择时间" /> <script> //还可以使用bootStarp时间控件自带的方法控制日期,但是得把input中的data-control="time"去除 $(".start").datetimepicker({ language: "zh-CN",//时间选择器的语言 format: 'yyyy-mm-dd',//时间选择器的格式 weekStart: 1,//从周几开始? autoclose: true,//是否自动关闭? todayBtn: true,//今日按钮是否显示? todayHighlight: true,//今日是否特殊闪亮? minView: 2//显示的最小页面 }); </script>
<textarea id="txtComment" style="width: 550px; height: 105px;" class="form-control" data-control="simditor" data-foldername="TaskComment" placeholder="请简洁明了地描述评论内容(必填)"></textarea> <input type="button" id="commit" value="提交" class="btn" /> <script> $("#commit").bind("click", function () { //去除http://pms.in-zj.net var getBody = GetClearPmsImgUrl($("#txtComment")); alert(getBody); //转化成没有安全隐患的编码数据 $('<div/>').text(getBody).html(); //添加成功后清空 $("#txtComment").val(""); $(".simditor-body").html("<p><br></p>"); }); </script>
<div class="paging" data-text="yes"></div> <script> pageCount = 150;//数据总数(可设,可不设) pageSize = 6;//每页显示数量 var Fun = function (pageIndex) { //分页改变后的回调方法 console.log(pageIndex);//输出当前选中页数 pageCount = 10000;//数据总数重新赋值 if (pageIndex == 1) { ResetPage(pageCount, $(".paging"));//重置分页控件 } } Fun(1);//执行方法 InitPaging(Fun, $(".paging"));//加载绑定分页控件,$(".paging")是分页控件绑定的容器,这里的Fun是一个参数,并不会执行 ResetPage(Total, $(".paging"));//当总数改变时,重置分页控件到第一页的方法。Total是改变后的数据总数 </script>其他方法说明:
ajaxCD({ key:'GetOffice',//接口所需Key type: 'get',//接口类型:get,post(这里不区分大小写) urlType: 'Hrs'//这是接口域名地址对应参数,目前有Core:BigData库提供的API,Hrs:HRS库提供的API }, function(re){ console.log(re); } );使用案例二(获取资源照片):
ajaxCD({ key:'GetResourcesPic',//接口所需Key type: 'get',//接口类型:get,post(这里不区分大小写) urlType: 'Core',//这是接口域名地址对应参数,目前有Core:BigData库提供的API,Hrs:HRS库提供的API obj: JSON.stringify({//JSON格式的键值对参数 "pageIndex": 1, "pageSize": 12 }) }, function(re){ for (var i = 0; i < re.length; i++) { console.log(re[i].Path);//输出图片路径 } } );
ajaxCDXhr({ key:'InsertPicture',//接口所需Key type: 'post',//接口类型:get,post(这里不区分大小写) urlType: 'Core',//这是接口域名地址对应参数,目前有Core:BigData库提供的API,Hrs:HRS库提供的API obj: JSON.stringify({ "Picture": [{ "resourceID": 1,//资源ID "binaryData": "",//Base64String类型的byte[] "suffixName": "jpg",//图片后缀名(jpg没有.) "addID": 44//添加人ID }] }) }, function(loaded, tot, per){ console.log(loaded);//已经上传大小情况 console.log(tot);//附件总大小 console.log(per);//已经上传的百分比 }, function(re){//上传成功后的回掉 console.log(re); }, function(re){//上传失败后的回掉 console.log(re); } );
<ul id="box"> <li>姓名:{{name || "测试"}} 年龄:{{age}} 性别: {{sex}} 时间:{{time[0]}}</li> </ul> //模板 var tpl = $("#box").html(); //模拟数据 var data = [ { name: "", age: 20, sex: "女", time: ["2018-2-11"] }, { name: "李四", age: 22, sex: "男", time: ["2018-2-11"] } ]; var str = ''; for (var i = 0; i < data.length; i++) { str += DataFormat(tpl,data[i]); } $('#box').html(str);
使用案例: 点击进入DEMO中
<div class="col-sm-6"> <div data-control="JurisdictionOffice" data-isadd="false" data-selectidlist="1,3,5,9,10,11" class="row text-info"></div> </div>
使用案例:
<div class="col-sm-2"> <select id="AnTongAdministrativeDivision" data-control="AnTongAdministrativeDivision" data-group="AnTongAdministrativeDivision" class="form-control" data-selectid="4"></select> </div>
使用案例:
<select data-control="yearList" class="form-control" data-iswhole="true" data-selectid="2018" data-startYear="2006" ></select> <select data-control="monthList" class="form-control" data-iswhole="true" data-selectid="1" ></select>
使用案例:
<div data-control="NavigationLink"></div>
<input type="button" class="btn btn-info" data-control="Industry" value="选择产业" /> <input type="button" class="btn btn-default" data-control="QueryIndustry" value="查询产业" />
<div class="form-horizontal"> <div class="form-group"> <div class="col-sm-2"> <select id="GovernmentLevel" name="GovernmentLevel" data-control="GovernmentLevel" data-group="GovernmentSector" class="form-control" data-selectid="2"></select> </div> <div class="col-sm-2"> <select id="GovernmentLevelSon" name="GovernmentLevelSon" data-control="GovernmentLevelSon" class="form-control" data-group="GovernmentSector" data-selectid="9"></select> </div> </div> <div class="form-group"> <div class="col-sm-2 "> <select id="Country" name="Country" class="form-control" data-control="Country" data-group="GovernmentSector"> <option value="236">中国</option> </select> </div> <div class="col-sm-2"> <select id="DistrictA" name="DistrictA" data-control="DistrictA" class="form-control hidden" data-group="GovernmentSector"></select> </div> <div class="col-sm-2"> <select id="DistrictB" name="DistrictB" data-control="DistrictB" data-parentid="DistrictA" class="form-control hidden" data-group="GovernmentSector"></select> </div> <div class="col-sm-2"> <select id="DistrictC" name="DistrictC" data-control="DistrictC" data-parentid="DistrictB" class="form-control hidden" data-group="GovernmentSector"></select> </div> <div class="col-sm-2"> <select id="DistrictD" name="DistrictD" data-control="DistrictD" data-parentid="DistrictC" class="form-control hidden" data-group="GovernmentSector"></select> </div> </div> <div class="form-group"> <div> <div class="col-sm-2"> <select id="GovernmentSector" name="GovernmentSector" data-control="GovernmentSector" class="form-control" data-group="GovernmentSector" data-selectid="16"<</select> </div> </div> <div class="col-sm-2""> <div class="btn btn-default" data-control="AddGovernmentSector" data-group="GovernmentSector">添加政府部门</div> </div"> <div class="col-sm-2""> <div class="btn btn-default" onclick="BindAllGovernmentSector();">刷新政府部门</div> </div> </div> <div class="form-group"> <div class="col-sm-2"> <select id="DistrictType" name="DistrictType" data-control="DistrictType" class="form-control" data-group="GovernmentSector"></select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <input type="button" id="DistrictMultiselect" name="DistrictMultiselect" runat="server" class="btn btn-info" data-control="DistrictMultiselect" data-group="GovernmentSector" /> </div> </div> </div>
<input type="text" data-control="CreatePoint" data-linkagecontainer="editPoint" class="form-control" style="width:230px;" placeholder="请输入地址,将自动生成坐标" />
<a class="btn btn-xs btn-primary" data-control="BaiduMap" data-pointxy="119.917854,30.418717" title="查看卫星定位"><span class="glyphicon glyphicon-map-marker"></span></a> <a class="btn btn-xs btn-primary" data-control="BaiduMap" data-pointxy="119.917854,30.418717" data-isedit="true" title="修改坐标"><span class="glyphicon glyphicon-map-marker"></span></a>
<select data-control="Employe"></select>
<button type="button" class="btn btn-default" data-control="ByDepSectorUser" data-employecookie="20">按部门选择员工</button> <script> function EndSelectEmployeIDList(index, re,idList) { console.log(index); console.log(re); console.log(idList); } </script>
<div data-control="FileList" data-group="PolicyRegulations"></div> <br /> <button type="button" id="uploadPolicyRegulations" class="btn btn-default" data-control="UploadFiles" data-filesType="0" data-group="PolicyRegulations">上传文件</button> <script> function UploadFilesSuccess(re) { console.log(re); } function FileDelReturn(re) { console.log(re); } </script>
<button type="button" class="btn btn-default" data-control="UploadPictures" data-picturestype="100" data-watermark="true" data-pictureheight="500" data-picturewidth="500">点我上传</button> <script> function UploadPictureSuccess(re) { console.log(re); } </script>
<select data-control="Office" data-selectid="11" data-selectids="1490,1491,1492,1493,1494,1495,1496,1497,1498,1499,1500,1501,1502,1503,1504,1505,1506"></select>
<select data-control="OfficeValueID" data-group="OfficeEmployeeGroup"></select> <select data-control="Employe" data-group="OfficeEmployeeGroup"></select>
<select id="aa" data-control="DistrictA" class="form-control" style="width:100px; float:left; margin-left:10px;"></select> <select id="bb" data-control="DistrictB" data-parentid="aa" class="form-control" style="width:100px; float:left; margin-left:10px;"></select> <select id="cc" data-control="DistrictC" data-parentid="bb" class="form-control" style="width:100px; float:left; margin-left:10px;"></select> <select data-control="DistrictD" data-parentid="cc" class="form-control" style="width:100px; float:left; margin-left:10px;"></select> <script> function DistrictAChange(re) { layer.msg("‘省’控件改变事件,当前选中省ID:"+re.val(), { icon: 6 }); } function DistrictBChange(re) { layer.msg("‘市’控件改变事件,当前选中市ID:" + re.val(), { icon: 6 }); } function DistrictCChange(re) { layer.msg("‘区’控件改变事件,当前选中区ID:" + re.val(), { icon: 6 }); } function DistrictDChange(re) { layer.msg("‘县’控件改变事件,当前选中县ID:" + re.val(), { icon: 6 }); } function DistrictBindComplete(){ console.log("四级联动都加载完毕后触发的回调方法"); }; </script>
<div data-control="CreateButton" data-ShowEditButton="true" data-ShowDeleteButton="true" data-EmployeeID="1" data-AddID="1" data-ObjectID="2"> 这是可能需要修改或者是删除的数据信息></div>
<input type="text" data-replace="int" style="width:100px;" /> <input type="text" data-replace="float" style="width:100px;" /> <input type="text" style="width:100px;" placeholder="判空提示" data-check="isnull" data-checktips="名称" /> <input type="text" style="width:100px;" placeholder="最小值最大值" data-checkmax="50000000" data-checkmin="5000" /> <input type="text" style="width:100px;" placeholder="手机号" data-checkmobile="true" /> <input type="text" style="width:100px;" placeholder="手机号或带区号的电话号码" data-checkMobileOrTel="true" /> <input type="text" style="width:100px;" placeholder="邮箱" data-checkemail="true" /> <textarea data-htmlencode="true" data-checkmaxlength="50" placeholder="字符串长度"></textarea> <textarea data-htmlencode="true" data-htmldecode="true" placeholder="编码解码"></textarea> <input type="button" style="width:100px;" value="提交" data-check="button" />