您好,登錄后才能下訂單哦!
怎么在.net中使用jquery自定義表單?相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。
1.工作前準(zhǔn)備
1.1.實(shí)現(xiàn)的思路
思路一:
(1)ueditor添加自定義按鈕
(2)繪制表單(控件會(huì)觸發(fā)的腳步【暫時(shí)考慮范圍】)【每個(gè)控件均需添加控件名稱和創(chuàng)建名稱】
(3)保存表單時(shí)建立數(shù)據(jù)庫(kù)表(無需存儲(chǔ)表信息),并保存html字符串
(4)修改表單需同時(shí)修改數(shù)據(jù)庫(kù)
(5)表單發(fā)起獲取數(shù)據(jù)封裝成json,進(jìn)行后臺(tái)保存。
思路二:
(1)jquery 拖動(dòng)自定義標(biāo)簽,在指定區(qū)域進(jìn)行繪制
(2)表單屬性設(shè)置相應(yīng)的表單屬性和表單基本布局
(3)設(shè)置每個(gè)控件的屬性值
(4)把表單信息和控件以json的形式傳入后臺(tái)進(jìn)行保存
(5)從后臺(tái)獲取數(shù)據(jù)json對(duì)象用jquery 繪制表單頁(yè)面
(6)創(chuàng)建一張表(F-F200)把表單數(shù)據(jù)存入表單中。
最終選擇的是【思路二】,原因是富文本編輯器繪制起來有很多自動(dòng)生成的標(biāo)簽,讓人感覺很是不爽。當(dāng)然可以對(duì)ueditor進(jìn)行處理(這個(gè)也是兩年前的思路)。
1.2.實(shí)現(xiàn)過程的確定
整個(gè)的過程從借鑒開始網(wǎng)上有些類似的功能,從中得到很多幫助在這就不一一鳴謝了。然后就是沒羞沒臊的3天腳本修改工作【現(xiàn)在基本完成不過還在持續(xù)中】。后臺(tái)數(shù)據(jù)的處理完全沒有什么可說的,中間用的了一些緩存問題,本來說是用redis呢,結(jié)果商量一些說不用難部署(難部署???好吧一臉懵逼),就用了c#的CacheHelper。
2.具體實(shí)現(xiàn)
繪制表單預(yù)覽與保存
2.1.腳本
以上是表單創(chuàng)建的js腳本。
就是上邊那個(gè)圖片的實(shí)現(xiàn)。
html重要分左中右三部分。左邊是頁(yè)面上所用到的標(biāo)簽區(qū)域,中間是展示區(qū)域,右邊是表單和控件屬性的設(shè)置區(qū)域。htnl 腳本如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="keywords" content="kmonkey,王延領(lǐng),在線表單,自定義表單,表單設(shè)計(jì)器"> <meta name="description" content="表單設(shè)計(jì)器,支持文本、圖片、地圖、單選、多選,下拉等多種輸入類型,我是準(zhǔn)備把它做成一個(gè)超級(jí)通用的一個(gè)插件。讓不懂編程的人也能很輕松的設(shè)計(jì)出想要的表單。繼續(xù)加油code吧"> <meta name="renderer" content="webkit"> <title>表單設(shè)計(jì)</title> <link type="text/css" rel="stylesheet" href="~/Content/FormDesign/css/common.css?v=20160929" /> <link type="text/css" rel="stylesheet" href="~/Content/FormDesign/css/jquery-ui-1.9.2.custom.css" /> <link type="text/css" rel="stylesheet" href="~/Content/FormDesign/css/widgets.css?v=20160929" /> <link type="text/css" rel="stylesheet" href="~/Content/FormDesign/css/jquery.mCustomScrollbar.min.css?v=20160929" /> <link type="text/css" rel="stylesheet" href="~/Content/FormDesign/css/formbuild.css?v=20160929" /> </head> <body> <div id="container"> <!-- left state --> <div id="left"> <div id="addFields" class="overhide"> <h4 class="fields-group">通用字段</h4> <ul id="col1"> <li id="drag_text" ftype="text"><a id="sl" class="btn-field" title="適用于填寫簡(jiǎn)短的文字內(nèi)容,身份證號(hào)、銀行卡號(hào)、工號(hào)等請(qǐng)使用此類型。" href="#"><i class="iconfont"></i>單行文本</a></li> <li id="drag_textarea" ftype="textarea"><a id="pt" class="btn-field" title="適用于填寫大段文本,如“備注”、“留言”" href="#"><i class="iconfont"></i>多行文本</a></li> <li id="drag_radio" ftype="radio"><a id="mc" class="btn-field" title="適用于在少量選項(xiàng)里選一個(gè),如“男/女”" href="#"><i class="iconfont"></i>單選框</a></li> <li ftype="date"><a id="dt" class="btn-field" title="適用于選擇特定的日期" href="#"><i class="iconfont"></i>日期</a></li> <li ftype="dropdown2"><a id="dd2" class="btn-field" title="適用于展示多級(jí)聯(lián)動(dòng),如第一級(jí)是飲料,第二級(jí)只能選擇綠茶、紅茶等" href="#"><i class="iconfont"></i>多級(jí)下拉框</a></li> <li ftype="file"><a id="fu" class="btn-field" title="適用于收集文件,如簡(jiǎn)歷、照片" href="#"><i class="iconfont"></i>文件上傳</a></li> <li id="drag_radio" ftype="section"><a id="sb" class="btn-field" title="用于將字段分組顯示,更清晰" href="#"><i class="iconfont"></i>分隔符</a></li> </ul> <ul id="col2"> <li id="drag_number" ftype="number"><a id="nb" class="btn-field" title="適用于填寫涉及到數(shù)學(xué)運(yùn)算的數(shù)字,身份證號(hào)、銀行卡號(hào)、工號(hào)等請(qǐng)使用單行文本。" href="#"><i class="iconfont"></i>數(shù)字</a></li> <li id="drag_checkboxes" ftype="checkbox"><a id="cb" class="btn-field" title="適用于在幾個(gè)選項(xiàng)里選多個(gè),如投票" href="#"><i class="iconfont"></i>多選框</a></li> <li id="drag_dropdown" ftype="dropdown"><a id="dd" class="btn-field" title="適用于在非常多的選項(xiàng)里選一個(gè),如省份選擇" href="#"><i class="iconfont"></i>下拉框</a></li> <li ftype="time"><a id="ti" class="btn-field" title="適用于填寫特定的時(shí)間" href="#"><i class="iconfont"></i>時(shí)間</a></li> <li ftype="likert"><a id="lk" class="btn-field" title="適用于處理批量單選" href="#"><i class="iconfont"></i>組合單選框</a></li> <li ftype="image"><a id="im" class="btn-field" title="在表單上加入圖片,起到宣傳產(chǎn)品或美化表單的作用" href="#"><i class="iconfont"></i>圖片</a></li> <li id="drag_dropdown" ftype="html"><a id="ht" class="btn-field" title="適用于添加HTML顯示元素,如“p,a,span,div”等" href="#"><i class="iconfont"></i>HTML</a></li> </ul> <h4 class="fields-group">聯(lián)系信息字段</h4> <ul id="col3"> <li ftype="name"><a id="nm" class="btn-field" title="適用于填寫用戶姓名" href="#"><i class="iconfont"></i>姓名</a></li> <li ftype="address"><a id="ad" class="btn-field" title="適用于填寫全國(guó)的地址" href="#"><i class="iconfont"></i>地址</a></li> <li ftype="phone"><a id="ph" class="btn-field" title="適用于填寫中國(guó)大陸內(nèi)的手機(jī)和座機(jī)號(hào)碼" href="#"><i class="iconfont"></i>電話</a></li> </ul> <ul id="col4"> <li ftype="email"><a id="em" class="btn-field" title="適用于填寫電子郵箱地址" href="#"><i class="iconfont"></i>電子郵箱</a></li> <li ftype="map"><a id="mp" class="btn-field" title="通過地圖收集地理信息,手機(jī)上可自動(dòng)定位" href="#"><i class="iconfont"></i>地理位置</a></li> <li ftype="url"><a id="ws" class="btn-field" title="適用于填寫網(wǎng)站鏈接" href="#"><i class="iconfont"></i>網(wǎng)址</a></li> <!--<li ftype="money"><a id="pr" class="btn-field" title="適用于填寫價(jià)格" href="#"><i class="iconfont"></i>價(jià)格</a></li> --> </ul> <h4 class="fields-group">宏控件</h4> <ul id="col5"> <li ftype="goods"><a id="gd" class="btn-field" title="和已知系統(tǒng)數(shù)據(jù)配合使用,如當(dāng)前登入人" href="#"><i class="iconfont"></i>當(dāng)前登入人</a></li> </ul> <ul id="col6"> <li ftype="goods" subtype="noimg"><a id="gd2" class="btn-field" title="和已知系統(tǒng)數(shù)據(jù)配合使用,如組織結(jié)構(gòu)部門" href="#"><i class="iconfont"></i>登入人部門</a></li> </ul> </div><!-- addFields --> </div> <!-- left end --> <!-- middle state --> <div id="middle"> <div class="forms"> <div id="fbForm" class="form form-focused"> <h3 id="fTitle"></h3> <div id="fDescription"></div> </div> </div> <div id="nofields" class="notice hide" > <div id="addFromButton" > <h3 class="color-red">沒有字段!</h3> <a href="#">表單中沒有字段,點(diǎn)擊或拖動(dòng)左邊的組件添加字段。</a> </div> </div> <!--表單繪制區(qū)域--> <ul id="fields" class="fields"></ul> <!--表單繪制區(qū)域--> <div class="formButtons hide" id="formButtons"> <table > <tr> <td ><a class="btn left" id="preview">預(yù)覽</a></td> <td ><a class="btn blue left" id="saveForm" href="#">保存</a></td> <!-- <td><a class="btn green left" id="btnAddField2" href="#"><b></b>添加新字段</a></td> --> </tr> </table> </div> </div> <!-- middle end --> <!-- right state--> <div id="right"> <!-- --> <div class="notice hide" id="noFieldSelected"> <h4><b>沒有選擇字段</b></h4> <p>請(qǐng)先在右側(cè)選擇需要編輯的字段,然后在此編輯字段的屬性。</p> </div> <div id="fieldProperties" class="hide"> <!-- field properties --> <h4 class="property-title">表單屬性</h4> <div id="allPropsContainer"> <ul id="allProps"> <!-- <li class="num" id="liPos">1.</li> --> <li id="plabel"> <label class="desc" for="lbl"> 字段名稱 </label> <textarea id="lbl" name="LBL" class="xxl" rows="2"></textarea> </li> <li id="ptype" class="left half"> <label class="desc" for="type"> 字段類型 <a href="#" class="help" title="關(guān)于字段類型" rel="可以修改表單保存之前添加字段的類型。">(?)</a> </label> <select id="type" name="TYP" class="xxl"> <optgroup label="標(biāo)準(zhǔn)類型"> <option value="text">單行文本</option> <option value="textarea">多行文本</option> <option value="radio">單選框</option> <option value="number">數(shù)字</option> <option value="checkbox">多選框</option> <option value="dropdown">下拉框</option> </optgroup> <optgroup label="常用類型"> <option value="email">電子郵箱</option> <option value="address">地址</option> <option value="map">地理位置</option> <option value="phone">手機(jī)</option> <option value="name">姓名</option> <option value="file">上傳文件</option> <option value="date">日期</option> <option value="time">時(shí)間</option> <option value="url">網(wǎng)址</option> <option value="likert">組合單選框</option> <option value="dropdown2">多級(jí)下拉框</option> <option value="image">圖片</option> <option value="goods">配圖商品</option> <option value="goodsnoimg">無圖商品</option> </optgroup> </select> </li> <li class="right half" id="pfldsize"> <label class="desc" for="fldsize"> 字段長(zhǎng)度 <a href="#" class="help" title="關(guān)于字段長(zhǎng)度" rel="用于限定字段輸入框的長(zhǎng)度(“多行文本”字段限定輸入框高度)。">(?)</a> </label> <select id="fldsize" name="FLDSZ" class="xxl"> <option value="s">短</option> <option value="m">中</option> <option value="xxl">長(zhǎng)</option> </select> </li> <li class="right half" id="playout"> <label class="desc" for="layout"> 字段布局 <a href="#" class="help hide" title="關(guān)于字段布局" rel="此屬性僅對(duì)復(fù)選框和單選框類型的字段有效,用于定義復(fù)選框或單選框的排列方式。其中自動(dòng)排列是指按一個(gè)接一個(gè)的方式進(jìn)行排列。">(?)</a> </label> <select id="layout" name="LAY" class="xxl"> <option value="one">一列</option> <option value="two">二列</option> <option value="three">三列</option> <option value="oneByOne">自動(dòng)排列</option> </select> </li> <li class="right half" id="pdateformat"> <label class="desc" for="dateformat"> 日期格式 <a href="#" class="help hide" title="關(guān)于日期格式" rel="此屬性用于指定日期的輸入格式。YYYY代表年,MM代表月,DD代表日。">(?)</a> </label> <select id="dateformat" name="FMT" class="xxl"> <option value="ymd" selected="selected">YYYY - MM - DD</option> @*<option value="mdy">MM / DD / YYYY</option> <option value="dmy">DD / MM / YYYY</option>*@ </select> </li> <li class="right half" id="pphoneformat"> <label class="desc" for="phoneformat"> 電話格式 <a href="#" class="help hide" title="關(guān)于電話格式" rel="此屬性用于指定電話的輸入格式。支持普通的電話號(hào)碼輸入和“區(qū)號(hào)-總機(jī)-分機(jī)”的座機(jī)號(hào)碼輸入。">(?)</a> </label> <select id="phoneformat" name="FMT" class="xxl"> <option value="mobile" selected="selected">手機(jī)</option> <option value="tel">座機(jī)</option> </select> </li> <li class="right half" id="pnameformat"> <label class="desc" for="nameformat"> 姓名格式 <a href="#" class="help hide" title="關(guān)于姓名格式" rel="此屬性用于指定姓名的輸入格式。支持普通的姓名格式和帶稱呼的加長(zhǎng)格式。">(?)</a> </label> <select id="nameformat" name="FMT" class="xxl"> <option value="short" selected="selected">普通</option> <option value="extend">加長(zhǎng)</option> </select> </li> <li class="right half" id="pmoneyformat"> <label class="desc" for="moneyfomat">貨幣格式</label> <select id="moneyfomat" name="FMT" class="xxl"> <option value="yen">¥ 人民幣/日元</option> <option value="dollars">$ 美元</option> <option value="pounds">£ 英鎊</option> <option value="euros">? 歐元</option> </select> </li> <li class="left half" id="pN"> <label class="desc" for="N">層級(jí)</label> <select id="N" name="pN" class="xxl"> <option value="2" selected="selected">2</option> <option value="3">3</option> <option value="4">4</option> </select> </li> <li class="clear noheight"></li> <li id="plikert" class="bggray"> <fieldset> <legend> 行標(biāo)簽 <a href="#" class="help hide" title="關(guān)于行標(biāo)簽" rel="此屬性用于指定組合單選框中表示組合類別的標(biāo)簽。">(?)</a> </legend> <ul id="likertRows"></ul> </fieldset> <fieldset> <legend> 列標(biāo)簽 <a href="#" class="help hide" title="關(guān)于列標(biāo)簽" rel="此屬性用于指定組合單選框中表示級(jí)次的標(biāo)簽。">(?)</a> </legend> <ul id="likertCols"></ul> <div class="center"> <a id="btnLikertPredefine" href="#" class="btn gray">批量編輯</a> </div> </fieldset> </li> <li class="clear noheight"></li> <li id="pitems" class="clear bggray"> <fieldset> <legend> 選擇項(xiàng) <a href="#" class="help hide" title="關(guān)于選擇項(xiàng)" rel="此屬性用于指定有哪些選擇項(xiàng)可以提供給用戶選擇。利用旁邊的增加或刪除按鈕或以增加或刪除選擇項(xiàng)。對(duì)于下拉框在沒有指定默認(rèn)選中項(xiàng)的情況下將自動(dòng)選中第一項(xiàng)。">(?)</a> </legend> <ul id="itemList"></ul> <div id="pitems_radio" class="center"> <a id="btnItemsPredefine" href="#" class="btn gray">批量編輯</a> </div> <div id="pitems_batchedit" class="center"> <a id="btnItemsBatch" href="#" class="btn gray">批量編輯</a> </div> </fieldset> </li> <li id="pgoods" class="clear bggray"> <fieldset> <legend> 商品列表 <a href="#" class="help hide" title="關(guān)于商品列表" rel="此屬性用于指定在表單中顯示的商品。如果是圖片商品,圖片長(zhǎng)寬比例請(qǐng)保持1:1,文件體積需要在500KB以內(nèi),支持.jpg格式。提示:按住商品列表拖動(dòng)可以排序哦。">(?)</a> </legend> <ul id="goodsList" class="clearfix"></ul> <div id="pgoods_radio" class="center add-goods"> <form name="goodsUploadForm" class="add-image-btn" action="" method="POST" enctype="multipart/form-data" > <a id="btnAddGoods" title="添加配圖商品" class="btn gray" href="#"> <span >+ 添加配圖商品</span> <input id="fileToUpload" title="添加配圖商品" name="fileToUpload" class="file-prew" title="支持jpg、jpeg、png格式,文件小于500K" type="file" size="3" accept="image/jpeg,image/png,image/bmp,image/gif" /> </a> <!-- <a id="btnGoodsPredefine" href="#" title="添加常用配圖商品" >添加常用配圖商品</a> --> </form> <div id="addNoImgGoods" class="add-goods-btn" > <a id="btnAddNoImgGoods" title="添加無圖商品" class="btn gray"><span>+ 添加無圖商品</span></a> </div> <div class="clear"> <input id="goodsForBuy" value="1" name="FBUY" type="checkbox"> <label for="goodsForBuy">商品用于向供應(yīng)商詢價(jià)</label> <a href="#" class="help hide" title="關(guān)于商品用于向供應(yīng)商詢價(jià)" rel="當(dāng)勾選此選項(xiàng)時(shí),將由制表人確信數(shù)量,填表人根據(jù)數(shù)量填寫單價(jià)。主要用于向供應(yīng)商詢價(jià),供應(yīng)商填寫表單進(jìn)行報(bào)價(jià)的場(chǎng)景。">(?)</a><br> </div> </div> </fieldset> </li> <li id="pimage"> <form name="uploadImageForm" action="" method="POST" enctype="multipart/form-data" > <label class="desc" for="uploadImage"> 上傳圖片<a href="#" class="help hide" title="關(guān)于圖片" rel="在表單中添加圖片顯示,支持gif格式,每張圖片最大2M。">(?)</a> </label> <a class="btn gray filewrap"> <span>上傳圖片</span> <input type="file" id="uploadImage" name="uploadImage" title="支持jpg、jpeg、png格式,文件小于500K" accept="image/jpeg,image/png,image/bmp,image/gif" /> </a> </form> </li> <li class="left half clear" id="poptions"> <fieldset> <legend>設(shè)置</legend> <ul> <li id="popt_required"> <input id="reqd" name="REQD" type="checkbox" value="1" /> <label for="reqd">必須輸入</label> <a href="#" class="help hide" title="關(guān)于必須輸入" rel="強(qiáng)制填表人該字段必須輸入,否則將不能提交表單。<a href='#' class='video help' videosrc='images/videos/2-1.mp4'><i class='iconfont icon green2' ></i>觀看視頻說明</a>">(?)</a> </li> <li id="popt_unique"> <input id="uniq" name="UNIQ" type="checkbox" value="1" /> <label for="uniq">不許重復(fù)</label> <a href="#" class="help" title="關(guān)于不許重復(fù)" rel="用于保證字段輸入值的唯一性,適用于如手機(jī)號(hào)、QQ號(hào)等需要保證唯一性的輸入值。">(?)</a> </li> <!-- <li id="popt_qrinput"> <input id="qrinput" name="QRINPUT" type="checkbox" value="1"/> <label for="qrinput">掃碼輸入</label> <a href="#" class="help hide" title="關(guān)于掃碼輸入" rel="通過掃描二維碼或條形碼的方式輸入數(shù)據(jù)。<i>注意:目前僅支持在微信中打開表單掃碼。</i>">(?)</a> </li> --> <!-- <li id="popt_random"> <input id="random" name="RDM" type="checkbox" value="1" /> <label for="random">隨機(jī)</label> <a href="#" class="help hide" title="關(guān)于隨機(jī)" rel="此屬性用于指定單選框中的選項(xiàng)在訪問時(shí)出現(xiàn)的順序是否是隨機(jī)的。如果勾選,則選擇項(xiàng)在每次訪問時(shí)出現(xiàn)的順序是隨機(jī)的。">(?)</a> </li> --> <!-- <li id="popt_allowother"> <input id="allowOther" name="OTHER" type="checkbox" value="1"/> <label for="allowOther">允許其他值</label> <a href="#" class="help hide" title="關(guān)于允許其他值" rel="此屬性用于指定是否可以讓用戶輸入除選擇項(xiàng)以外的其他值。">(?)</a> </li> --> <li id="popt_hidenum"> <input id="hidenum" name="HDNM" type="checkbox" value="1" /> <label for="hidenum">隱藏?cái)?shù)字</label> <a href="#" class="help hide" title="關(guān)于隱藏?cái)?shù)字" rel="在單選框下方通常都有一個(gè)數(shù)字用于標(biāo)識(shí)此選項(xiàng)的分值,此屬性用于指定是否隱藏此數(shù)字。">(?)</a> </li> <li id="popt_authcode"> <div> <input id="internal" name="INTERNAL" type="checkbox" value="1" /> <label for="internal">啟用國(guó)際手機(jī)</label> <a href="#" class="help hide" title="關(guān)于啟用國(guó)際手機(jī)號(hào)" rel="啟用后可以向全球200多個(gè)國(guó)家和地區(qū)發(fā)送短信,請(qǐng)先聯(lián)系客戶咨詢使用詳情。<a href='help/smsprice.html' target='_blank'>查看資費(fèi)明細(xì)</a>">(?)</a> </div> <input id="authcode" name="AUTH" type="checkbox" value="1" /> <label for="authcode">驗(yàn)證碼</label> <a href="#" class="help hide" title="關(guān)于手機(jī)驗(yàn)證碼" rel="啟用驗(yàn)證碼需要滿足以下兩個(gè)條件:1、簽名通過審核(可聯(lián)系在線客服審核);2、有可用短信量(短信需要單獨(dú)購(gòu)買);<a href='help/smsprice.html' target='_blank'>查看資費(fèi)明細(xì)</a>">(?)</a> <div id="signcnt" class="hide"> <input id="sign" name="SIGN" placeholder="短信簽名" type="text" maxlength="16" /> <a id="btnSignSumbmit" target="_blank" href="/web/formview/5606403b0cf2f6fe39b1965d" class="btn no-icon btn-blue small">提交審核</a> </div> </li> <!-- <li id="popt_compress"> <input id="chkCompress" type="checkbox" value="1"/> <label for="chkCompress">壓縮圖片</label> <a href="#" class="help hide" title="關(guān)于壓縮圖片" rel="如果上傳的是圖片,勾上此項(xiàng)后將按照您設(shè)置的壓縮比對(duì)圖片進(jìn)行壓縮,達(dá)到減少網(wǎng)絡(luò)流量和節(jié)省存儲(chǔ)空間的目的。數(shù)值越小,表示壓縮越嚴(yán)重,越省流量和存儲(chǔ)空間,但也意味著圖象質(zhì)量越差。<i>注意:此選項(xiàng)僅當(dāng)上傳的文件是圖片時(shí)才起作用,且不支持IE10以下瀏覽器及少部分低版本手機(jī)操作系統(tǒng)。對(duì)于 不支持的設(shè)備,將采用正常方式上傳。</i>">(?)</a> <div id="divCompress" class="hide"> <label for="selCompress">壓縮到</label> <select id="selCompress" name="CPRS" > <option value="10">10%</option> <option value="20">20%</option> <option value="30">30%</option> <option value="40">40%</option> <option value="50">50%</option> </select> </div> </li> --> <li id="popt_dismark"> <input id="chkDismark" name="DISMK" type="checkbox" value="1" /> <label for="chkDismark">禁止手動(dòng)標(biāo)注</label> <a href="#" class="help hide" title="禁止手動(dòng)標(biāo)注" rel="默認(rèn)情況下,地理位置支持自動(dòng)定位和手動(dòng)標(biāo)注。您可以勾選此選項(xiàng)來禁用手動(dòng)標(biāo)注,滿足某些需要真實(shí)確認(rèn)填表人位置的場(chǎng)景。">(?)</a> </li> </ul> </fieldset> </li> <li class="right half" id="psecurity"> <fieldset> <legend>字段可見性</legend> <input id="sec_pub" name="SCU" type="radio" value="pub" /> <label for="sec_pub">可見</label> <br /> <input id="sec_pri" name="SCU" type="radio" value="pri" checked="checked" /> <label for="sec_pri">隱藏</label> <a href="#" class="help" title="關(guān)于字段顯示狀態(tài)" rel="勾選此項(xiàng)之后,字段在頁(yè)面上處于隱藏狀態(tài)。">(?)</a> </fieldset> </li> <li class="clear noheight"></li> <li id="prange" class="bggray"> <fieldset> <legend> 范圍 <a href="#" class="help" title="關(guān)于范圍" rel="數(shù)值型字段用于限定數(shù)值的范圍;文本型字段用于限定字?jǐn)?shù)的多少。">(?)</a> </legend> <div> <div class="half left"> <label class="desc min not-bold" for="min">最小值</label> <input class="xxl number" id="min" name="MIN" type="text" value="" /> </div> <div class="half right"> <label class="desc max not-bold" for="max">最大值</label> <input class="xxl number" id="max" name="MAX" type="text" value="" /> </div> </div> </fieldset> </li> <li id="pdefval_text"> <label class="desc" for="defval_text"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <input id="defval_text" name="DEF" class="xxl" type="text" value="" maxlength="255" /> </li> <li id="pdefval_number"> <label class="desc" for="defval_number"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <input id="defval_number" name="DEF" class="xxl" type="text" value="" maxlength="255" /> </li> <li id="pdefval_date"> <label class="desc" for="defval_date"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。默認(rèn)值可以是'YYYY-MM-DD'格式的固定日期,也可以是如下一些動(dòng)態(tài)日期:'today', '+n days', '+n weeks', '+n months', '-n days', '-n weeks', '-n months',其中n為正整數(shù),如+2 days。對(duì)于動(dòng)態(tài)日期,將根據(jù)用戶訪問表單時(shí)的時(shí)間自動(dòng)轉(zhuǎn)換為對(duì)應(yīng)的日期。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <input id="defval_date" name="DEF" class="xxl" type="text" value="" maxlength="255" /> </li> <li id="pdefval_time"> <label class="desc" for="defval_time"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。默認(rèn)值可以是'HH:MM'格式的固定時(shí)間,也可以是如下一些動(dòng)態(tài)時(shí)間:'now', '+n minutes', '+n hours', '-n minutes', '-n hours',其中n為正整數(shù),如+30 minutes。對(duì)于動(dòng)態(tài)時(shí)間,將根據(jù)用戶訪問表單時(shí)的時(shí)間自動(dòng)轉(zhuǎn)換為對(duì)應(yīng)的時(shí)間。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <input id="defval_time" name="DEF" class="xxl" type="text" value="" maxlength="255" /> </li> <li id="pdefval_phone_tel" class="overhide clear hide"> <label class="desc" for="pdefval_phone_tel"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <div class="oneline tel reduction"> <span> <input id="defval_phone_tel_1" class="input tel" maxlength="4" size="4" type="text" /> <label for="defval_phone_tel_1">區(qū)號(hào)</label> </span> <span> - </span> <span> <input id="defval_phone_tel_2" class="input tel" maxlength="8" size="8" type="text" /> <label for="defval_phone_tel_2">總機(jī)</label> </span> <span> - </span> <span> <input id="defval_phone_tel_3" class="input tel" maxlength="4" size="4" type="text" /> <label for="defval_phone_tel_3">分機(jī)</label> </span> <input id="defval_phone_tel" type="hidden" size="18" name="DEF" /> </div> </li> <li id="pdefval_phone_mobile" class="clear hide"> <label class="desc" for="defval_phone_mobile"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <input id="defval_phone_mobile" name="DEF" class="m" type="text" maxlength="18" /> </li> <li id="pdefval_addr"> <label class="desc" for="defval_country"> 默認(rèn)值 <a href="#" class="help hide" title="關(guān)于默認(rèn)值" rel="在用戶訪問表單時(shí),此值將作為默認(rèn)值顯示在輸入框中。如果不需要默認(rèn)值,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <select id="defval_province" name="DEF_PROVINCE" class="s"></select> <select id="defval_city" name="DEF_CITY" class="s"><option>市</option></select> <select id="defval_zip" name="DEF_ZIP" class="s"><option>區(qū)/縣</option></select> </li> <li id="psection" class="clear"> <label class="desc" for="secdesc"> 分隔描述 <a href="#" class="help hide" title="關(guān)于分隔描述" rel="請(qǐng)?jiān)诖颂幪砑訉?duì)分隔符的描述,如果不需要描述可以清空。">(?)</a> </label> <textarea class="xxl" rows="5" id="secdesc" name="SECDESC"></textarea> </li> <li id="phtml" class="clear"> <label class="desc" for="html"> HTML內(nèi)容 <a href="#" class="help hide" title="關(guān)于HTML內(nèi)容" rel="如果您需要在表單上顯示HTML內(nèi)容,只支持顯示型HTML(如p,a,div等),不支持輸入型HTML(如input,select,radio等),請(qǐng)?jiān)诖颂庉斎胂鄳?yīng)HTML代碼。<a href='help/formbuilder.html#t31' target='_blank'>如何插入圖片和鏈接?</a>">(?)</a> </label> <textarea class="xxl" rows="5" id="html" name="HTML"></textarea> </li> <li id="pinstruct" class="clear"> <label class="desc" for="instruct"> 字段說明 <a href="#" class="help" title="關(guān)于字段說明" rel="對(duì)字段進(jìn)行解釋,幫助填表人進(jìn)行理解和輸入,并在字段右側(cè)顯示。">(?)</a> </label> <textarea class="xxl" rows="3" id="instruct" name="INSTR"></textarea> </li> <li class="clear noheight"></li> <li id="playout" class="bggray"> <label class="desc" for="layout"> 字段寬度(僅填表時(shí)可見) <a href="#" class="help hide" title="字段寬度" rel="讓多個(gè)字段并列顯示在同一行(僅適用于PC端)。<a href='#' class='video help' videosrc='images/videos/2-1-2.mp4'><i class='iconfont icon green2' ></i>觀看視頻說明</a><i>注意:設(shè)置的寬度在設(shè)計(jì)模式不可見,僅在查看表單時(shí)才能看到效果。</i>">(?)</a> </label> <select class="xxl" id="selLayout" name="LAYOUT"> <option value="">充滿整行</option> <option value="leftHalf">整行寬度的1/2</option> <option value="third">整行寬度的1/3</option> <option value="quarter">整行寬度的1/4</option> </select> </li> <li id="pexprop" class="hide"> <label class="desc" for="css">擴(kuò)展屬性</label> <input id="exprop" class="xxl" type="text" name="EX" value="" maxlength="1024" /> <!-- 1.字段的擴(kuò)展屬性不對(duì)外開放,僅內(nèi)部人員使用; 2.擴(kuò)展屬性是一個(gè)JSON對(duì)象 3.目前支持的JSON屬性為:{matfld:"F1,F2"} matfld:關(guān)聯(lián)查詢時(shí)下拉框中可以帶出的其它字段名; --> </li> <li class="clear noheight"></li> </ul> </div> </div> <!-- end field properties --> <!-- form properties --> <div id="formProperties"> <h4 class="property-title">表單屬性</h4> <ul id="allFormPerperties"> <li> <label for="formName" class="desc">表單名稱 </label> <input id="formName" name="FRMNM" class="xxl" maxlength="64" type="text" /> </li> <li class="clear"> <label for="desc" class="desc">描述 <a href="#" class="help hide" title="關(guān)于描述" rel="用于表單的描述、說明或解釋,同時(shí)描述內(nèi)容支持HTML。<a href='help/formbuilder.html#t31' target='_blank'>利用HTML標(biāo)記插入圖片和鏈接</a>。">(?)</a></label> <textarea id="desc" name="DESC" class="xxl" rows="3" placeholder="表單描述"></textarea> </li> <li> <label class="desc" for="labelAlign"> 標(biāo)簽對(duì)齊方式 </label> <select id="labelAlign" name="LBLAL" class="xxl"> <option value="T">上對(duì)齊</option> <option value="L">左對(duì)齊</option> <option value="R">右對(duì)齊</option> </select> </li> <li> <label class="desc" for="labelAlign">提交后跳轉(zhuǎn)選項(xiàng)</label> <ul> <li class="left"> <input id="confirmType_text" name="CFMTYP" value="T" checked="checked" type="radio" /> <label for="confirmType_text">顯示文本</label> <a href="#" class="help hide" title="關(guān)于顯示文本" rel="表單提交成功后,將顯示下面文本框內(nèi)設(shè)定的文字。<a href='#' class='video help' videosrc='images/videos/2-4-2-2.mp4'><i class='iconfont icon green2' ></i>觀看視頻說明</a>">(?)</a> </li> <li class="right"> <input id="confirmType_url" name="CFMTYP" value="U" type="radio" /> <label for="confirmType_url">跳轉(zhuǎn)至網(wǎng)頁(yè)</label> <a href="#" class="help hide" title="關(guān)于跳轉(zhuǎn)至網(wǎng)頁(yè)" rel="表單提交成功后,將自動(dòng)跳轉(zhuǎn)到下面文本框內(nèi)設(shè)定的網(wǎng)址。<a href='#' class='video help' videosrc='images/videos/2-4-2-1.mp4'><i class='iconfont icon green2' ></i>觀看視頻說明</a>">(?)</a> </li> <li class="clear" > <textarea id="confirmMsg_text" name="CFMMSG" class="xxl hide" rows="3">Thank you. Your entry has been successfully submitted.</textarea> <input id="confirmMsg_url" name="CFMURL" class="xxl hide" type="text" placeholder="http://" /> </li> </ul> </li> <!-- <li class="left half"> <label for="language" class="desc">語言 <a href="#" class="help" title="關(guān)于語言" rel="此屬性用于指定系統(tǒng)提示信息所使用的語言,當(dāng)用護(hù)訪問表單時(shí)系統(tǒng)的提示信息(如提交時(shí)的驗(yàn)證錯(cuò)誤信息)將以此語言顯示。目前僅支持簡(jiǎn)體中文和英文兩種語言。">(?)</a></label> <select id="language" name="LANG" class="xxl"> <option value="cn">簡(jiǎn)單中文</option> <option value="en">English</option> </select> </li> <li class="clear noheight"></li> <li id="liGoods" class="hide"> <fieldset> <legend>商品相關(guān)</legend> <ul> <li id="liSale" > <input id="sale" name="SALE" type="checkbox" value="1"> <label for="sale">促銷:</label> 滿 <input type="text" id="salem" name="SALEM" disabled class="number" /> 減 <input type="text" id="salej" name="SALEJ" disabled class="number" /> <a href="#" class="help" title="關(guān)于商品促銷" rel="當(dāng)表單中有商品字段時(shí),可以進(jìn)行“滿就減”的促銷活動(dòng),當(dāng)金額達(dá)到一定量時(shí)自動(dòng)減掉相應(yīng)金額,助您提升商品銷量。">(?)</a> </li> <li id="liPay"> <div class="highlight"> <input type="checkbox" id="chkAliPay" value="1" name="ALIPAY"/> <label class="bold" for="chkAliPay">在線支付</label> <a class="help" href="#" title="關(guān)于在線支付" rel="目前僅支持支付寶在線支付,需要開通支付寶商家服務(wù)才能使用。<a href='help/formbuilder.html#t62' target='_blank'>查看開通方法</a>">(?)</a> <div id="divPay" class="hide"> <a href="#" id="btnPaySetting" class="btn no-icon btn-gray">配置支付參數(shù)</a><br/> <label>不跳轉(zhuǎn)到在線支付條件</label> <a class="help" href="#" title="關(guān)于不跳轉(zhuǎn)條件" rel="您可以根據(jù)用戶填寫的數(shù)據(jù)來確定是否跳轉(zhuǎn)到在線支付頁(yè)面,當(dāng)滿足如下條件時(shí)將不進(jìn)行跳轉(zhuǎn),默認(rèn)跳轉(zhuǎn)。比如您可以添加一個(gè)“付款方式”的單選框,并在此設(shè)置當(dāng)選擇“貨到付款”時(shí)不跳轉(zhuǎn)到在線支付。">(?)</a> <div id="noAliConditionDiv" > <select id="noAliConditionField" name="PAYCONFLD" ></select> 等于 <select id="noAliConditionValue" name="PAYCONVAL" ></select> </div> </div> </div> </li> <li > <a target="_blank" href="jsform-setup.msi">下載小票自動(dòng)打印程序</a> <a href="#" class="help" title="關(guān)于小票自動(dòng)打印程序" rel="小票打印程序是專為商品類表單設(shè)計(jì)的一款應(yīng)用程序。安裝后,當(dāng)有新訂單提交時(shí)將會(huì)自動(dòng)打印出小票,您要做的僅是“見單送貨”。非常適合外賣及實(shí)體店鋪開展電子商務(wù)的應(yīng)用場(chǎng)景。">(?)</a> </li> </ul> </fieldset> </li> <li class="clear noheight"></li> <li id="liConfirm" class="clear"> <fieldset class="confirm"><legend>跳轉(zhuǎn)選項(xiàng)</legend> <ul> <li class="left"> <input id="confirmType_text" name="CFMTYP" value="T" checked="checked" type="radio"/> <label for="confirmType_text">顯示文本</label> <a href="#" class="help" title="關(guān)于顯示文本" rel="當(dāng)用戶提交表單成功時(shí),系統(tǒng)將跳轉(zhuǎn)至默認(rèn)的確認(rèn)頁(yè)面,頁(yè)面中將顯示下面文本框設(shè)定的內(nèi)容。">(?)</a> </li> <li class="right"> <input id="confirmType_url" name="CFMTYP" value="U" type="radio"/> <label for="confirmType_url">跳轉(zhuǎn)至網(wǎng)頁(yè)</label> <a href="#" class="help" title="關(guān)于跳轉(zhuǎn)至網(wǎng)頁(yè)" rel="當(dāng)用戶提交表單成功時(shí),系統(tǒng)將轉(zhuǎn)至下面文本框所設(shè)定的網(wǎng)址,而不是默認(rèn)的確認(rèn)頁(yè)面。">(?)</a> </li> <li class="clear"> <textarea id="confirmMsg_text" name="CFMMSG" class="xxl hide" rows="3">Thank you. Your entry has been successfully submitted.</textarea> <input id="confirmMsg_url" name="CFMURL" class="xxl hide" type="text" value="http://" /> </li> </ul> </fieldset> </li> <li class="clear noheight"></li> <li> <fieldset><legend>填寫控制</legend> <ul> <li> <label for="captcha">驗(yàn)證碼 <a href="#" class="help" title="關(guān)于驗(yàn)證碼" rel="通過一張只有人眼能識(shí)別而電腦無法識(shí)別的驗(yàn)證碼圖片來確定表單是手工提交,而 不是通過軟件進(jìn)行惡意的大量提交。默認(rèn)情況下,系統(tǒng)將根據(jù)同一IP提交頻率自動(dòng)決定是否顯示驗(yàn)證碼。您也可以選擇一直顯示驗(yàn)證碼或從不顯示驗(yàn)證碼。從不顯示驗(yàn)證碼通常用于在某個(gè)局域網(wǎng)絡(luò)有多次提交的情況,用以簡(jiǎn)化用戶輸入。">(?)</a></label> <div> <select id="captcha" class="m" name="CAPTCHA"> <option value="1">自動(dòng) (推薦)</option> <option value="2">一直顯示</option> <option value="0">從不顯示</option> </select> </div> </li> <li> <label for="entriesLimit">達(dá)到如下數(shù)據(jù)量后關(guān)閉表單 <a href="#" class="help" title="關(guān)于數(shù)據(jù)量限制" rel="此屬性用于指定表單可以收集數(shù)據(jù)的最大數(shù)據(jù)量,當(dāng)達(dá)到此數(shù)據(jù)量后表單將自動(dòng)關(guān)閉。如果不想進(jìn)行最大數(shù)據(jù)量限制,請(qǐng)將此處設(shè)置為空。">(?)</a> </label> <input id="entriesLimit" class="intnumber m" name="ENLMT" maxlength="8" type="text"/> </li> <li> <input id="onePerIp" name="IPLMT" value="1" type="checkbox"/> <label class="choice" for="onePerIp">每個(gè)IP只允許提交一次</label> <a href="#" class="help" title="關(guān)于IP訪問限制" rel="此屬性用于指定每一個(gè)IP地址只能提交一次表單,可以防止用戶在同一臺(tái)計(jì)算機(jī)上進(jìn)行多次提交。<br/><i>注意:相對(duì)外網(wǎng)而言,同一局域網(wǎng)內(nèi)的不同IP可能會(huì)當(dāng)作同一IP處理。局域網(wǎng)可通過手機(jī)驗(yàn)證碼確定唯一性。</i>">(?)</a> <br/> </li> <li> <input id="chkAutoFill" type="checkbox" value="1" name="AUTOFILL"/> <label for="chkAutoFill">自動(dòng)填充上次填寫數(shù)據(jù)</label> <a href="#" class="help" title="自動(dòng)填充上次填寫數(shù)據(jù)" rel="當(dāng)某個(gè)表單需要同一人(同一臺(tái)設(shè)備)多次填寫,并且填寫數(shù)據(jù)變化不大時(shí)可以勾選此選項(xiàng),自動(dòng)填充上次填寫數(shù)據(jù),加快輸入速度。">(?)</a> </li> <li> <div class="highlight"> <input id="schActive" value="1" name="SCHACT" type="checkbox"/> <label class="choice bold" for="schActive">表單只允許在規(guī)定的時(shí)間范圍內(nèi)訪問</label> <a href="#" class="help" title="關(guān)于訪問時(shí)間限制" rel="此屬性用于指定表單的有效時(shí)間范圍。表單將僅在此范圍內(nèi)能夠正常訪問,過期后將自動(dòng)關(guān)閉。如果不需要進(jìn)行訪問時(shí)間限制,請(qǐng)不要勾選此選項(xiàng)。">(?)</a> <div id="listDateRange" class="hide"> <div id="startTime" class="oneline overhide reduction color-green start"> <label class="h4">開始時(shí)間</label> <span> <input class="yyyy" maxlength="4" type="text"/> <label>YYYY</label> </span> <span> <input class="mm" maxlength="2" type="text"/> <label>MM</label> </span> <span> <input class="dd" maxlength="2" type="text"/> <label>DD</label> </span> <span><input type="text" class="hide datepincker"></input></span> <span> <select class="ho"> <option value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option selected="selected" value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> <label>HH</label> </span> <span> <select class="mi"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <label>MM</label> </span> </div> <div id="endTime" class="oneline overhide reduction color-red end"> <label class="h4">結(jié)束時(shí)間</label> <span> <input class="yyyy" maxlength="4" type="text"/> <label>YYYY</label> </span> <span> <input class="mm" maxlength="2" type="text"/> <label>MM</label> </span> <span> <input class="dd" maxlength="2" type="text"/> <label>DD</label> </span> <span><input type="text" class="hide datepincker"></input></span> <span> <select class="ho"> <option value="0">00</option> <option value="1">01</option> <option value="2">02</option> <option value="3">03</option> <option value="4">04</option> <option value="5">05</option> <option value="6">06</option> <option value="7">07</option> <option value="8">08</option> <option value="9">09</option> <option value="10">10</option> <option value="11">11</option> <option selected="selected" value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> </select> <label>HH</label> </span> <span> <select class="mi"> <option value="00">00</option> <option value="15">15</option> <option value="30">30</option> <option value="45">45</option> </select> <label>MM</label> </span> </div> <div class="noheight clear"></div> </div> </div> </li> </ul> </fieldset> </li> <li class="clear noheight"></li> <li> <fieldset><legend>數(shù)據(jù)查看</legend> <ul> <li> <label for="chkHideEmpty"><input type="checkbox" value="1" name="HDEMP" id="chkHideEmpty"> 查看數(shù)據(jù)時(shí)隱藏值為空的字段</label> <a title="關(guān)于隱藏值為空的字段" rel="當(dāng)勾選此選項(xiàng)后,查看數(shù)據(jù)時(shí)將不顯示值為空的字段。此設(shè)置對(duì)手機(jī)端查看和發(fā)送到郵箱的數(shù)據(jù)副本同樣有效。" class="help" href="#">(?)</a> <div class="highlight"> <label for="chkPublicData"><input type="checkbox" value="1" name="PUBDT" id="chkPublicData"> 允許未登錄用戶查詢數(shù)據(jù)</label> <a title="關(guān)于允許未登錄用戶查詢數(shù)據(jù)" rel="當(dāng)勾選此選項(xiàng)后,將對(duì)外發(fā)布一個(gè)查詢頁(yè)面,未登錄的用戶也可以通過此頁(yè)面查詢表單提交的數(shù)據(jù),通常用于通訊錄查詢,執(zhí)行進(jìn)度查詢,成績(jī)查詢等場(chǎng)景。" class="help" href="#">(?)</a> <a id="btnPubDataSetting" href="#" class="btn no-icon btn-gray hide">設(shè)置詳細(xì)參數(shù)</a> </div> </li> </ul> </fieldset> </li> --> </ul> </div> <!-- form properties end --> </div> <!-- right end --> </div><!-- container end --> <div class="hide"> <input id="itemselectbtn" value="選擇文件" type="button" /> </div> </div><!-- container end --> <div id="overlay" class="overlay hide"></div> <div id="lightBox" class="lightbox hide"> <div id="lbContent" class="lbcontent"></div> </div> <div id="status" class="status hide"> <div id="y" class="y" > <div id="statusText" class="statusText">正在處理...</div> </div> </div> <span id="helpTip" class="helpTip hide"><b></b><em></em></span> <script type="text/javascript" src="~/Content/FormDesign/js/head.load.min.js"></script> <script type="text/javascript"> var M = { FRMNM: "表單名稱", DESC: "", LANG: "cn", LBLAL: "T", CFMTYP: "T", CFMMSG: "提交成功。", SDMAIL: "0", CAPTCHA: "1", IPLMT: "0", SCHACT: "0", INSTR: "0", ISPUB: "1" } var F = []; var fieldsLimit = 150; var goodsNumber = 60; var imageNumber = 10; var LVL = 4; var isForTemplate = false; M.GID = M.GID || ''; IMGBUCKET = "jsformimages"; head.js("/Content/FormDesign/js/jquery-1.7.2.min.js", "/Content/FormDesign/js/jquery-ui-1.8.24.custom.min.js", "/Content/FormDesign/js/wangEditor.min.js?v=20160929", "/Content/FormDesign/js/ajaxfileupload.js?v=20160929", "/Content/FormDesign/js/plupload.full.min.js?v=20160929", "/Content/FormDesign/js/directfileupload.js?v=20160929", "/Content/FormDesign/js/utils.js?v=20160929", "/Content/FormDesign/js/widgets.js?v=20160929", "/Content/FormDesign/js/jquery.mCustomScrollbar.min.js?v=20160929", "/Content/FormDesign/js/jquery.mousewheel.min.js?v=20160929", "/Content/FormDesign/js/formbuilder.js?v=20160929", "/Content/FormDesign/js/address-cn.js?v=20160929"); </script> </body> </html>
以上腳本中主要的操作就是拖動(dòng),設(shè)置每個(gè)控件的時(shí)候改變對(duì)應(yīng)json的值。至于樣式的變化這里沒繪制表單的時(shí)候復(fù)雜一些。如果那位哥們要用這個(gè)模板稍微看一下代碼即可你只要修改一下地方即可:
復(fù)制代碼 代碼如下:
var M={FRMNM:"表單名稱",DESC:"",LANG:"cn",LBLAL:"T",CFMTYP:"T",CFMMSG:"提交成功。",SDMAIL:"0",CAPTCHA:"1",IPLMT:"0",SCHACT:"0",INSTR:"0",ISPUB:"1"}
var F=[];
其中M是表單信息json串,F(xiàn)是所用控件數(shù)據(jù)集字符串。所以在繪制的后保存的時(shí)候把這兩個(gè)值傳到后臺(tái)保存即可,只有修改的貨在頁(yè)面初始加載的時(shí)候進(jìn)行賦值就行啦。
2.2后臺(tái)代碼(MVC)
[HttpGet] public ActionResult FormView(string formData, string parameterData) { ViewBag.FormInfo = Session["formData"]; ViewBag.FormParameter = Session["parameterData"]; return View(); } /// <summary> /// 頁(yè)面預(yù)覽 /// </summary> /// <param name="formData">表單信息</param> /// <param name="parameterData">表單控件信息</param> /// <returns></returns> [HttpPost] //[ValidateInput(false)] public ActionResult FormView(string formData, string parameterData) { Session["formData"] = formData; Session["parameterData"] = parameterData; return pageHelper.OpenTab("FormDesignDetail", "預(yù)覽", "/CustomFrom/FormDesign/FormDesignDetail"); }
頁(yè)面預(yù)覽操作。不保存只是在頁(yè)面上顯示而已。因?yàn)槔L制表單不處理樣式的,所以最終樣式以預(yù)覽的樣式為標(biāo)準(zhǔn),所見即所得。
/// <summary> /// 保存表單信息 /// </summary> /// <param name="arry">{表單信息,表單字段信息}</param> /// <returns></returns> [HttpPost] [ValidateInput(false)] public ActionResult FormSave(string formData, string parameterData) { try { ActionResult result = base.AddExecuteScript(); if (result != null) return result; string strGUID = Guid.NewGuid().ToString(); //直接返回字符串類型 JavaScriptSerializer js = new JavaScriptSerializer(); List<FormControlInfo> fclist = js.Deserialize<List<FormControlInfo>>(parameterData); FormDesign model = js.Deserialize<FormDesign>(formData); model.FormInfo = formData; model.Form_Guid = strGUID; model.ZhuangTai = "0"; model.LuRuRen = userHelper.GetUser().UName; model.LuRuRen = DateTime.Now.ToString("yyyy-MM-dd"); var flag = bll.AddFormDesign(model, fclist); return flag ? pageHelper.CloseOpenTab("FormDesignAdd", "FormDesignDetail" + strGUID, "表單信息詳情", "/CustomFrom/FormDesign/FormDesignDetail?formgid=" + strGUID) : pageHelper.ExtAlert("新增失?。?quot;); } catch (Exception ex) { return null; } }
頁(yè)面保存信息,把json信息的元素都進(jìn)行存儲(chǔ)。表單信息和表單控件信息外鍵關(guān)聯(lián)用的是guid。
注:代碼請(qǐng)忽略一些細(xì)節(jié)和我們框架有關(guān)
預(yù)覽腳本
3.腳本要不要說一下???
[中午吃飯的時(shí)候?qū)懙?,周末抽時(shí)間詳細(xì)描述一下哈]
function createFields() { var b, //標(biāo)簽對(duì)其方式 a = $('#fields').empty(); if ('L' === M.LBLAL) { a.addClass('leftLabel') } else { if ('R' === M.LBLAL) { a.addClass('leftLabel labelRight') } } var mwith = 0; //循環(huán)數(shù)據(jù) typ="text" min="2323" max="432" reqd="1" uniq="1" def="默認(rèn)值" $.each(F, function (d, c) { if (!c) { return true } b = $(DEFFLD.field_li); b.attr('id', M.GID + d); b.attr("typ", c.TYP); if (c.min != undefined && c.min != "") { b.attr("min", c.min) }; if (c.max != undefined && c.max != "") { b.attr("max", c.max) } ; if (c.reqd != undefined && c.reqd != "0") { b.attr("reqd", c.reqd) }; if (c.uniq != undefined && c.uniq != "0") { b.attr("uniq", c.uniq) }; if (c.def != undefined && c.def != "") { b.attr("def", c.def) }; //布局非單行布局的時(shí)候,div寬度增加。 if (c.LAYOUT != undefined && c.LAYOUT != "") { b.addClass(c.LAYOUT) mwith += 200; } if (c.INSTR != undefined && c.INSTR != "") { b.addClass("fieldInstruct"); } createField(b, c, d + 1) a.append(b); }); if ($.isEmptyObject(F)) { $('#nofields').show(); $('#formButtons').hide() } if (M.GID != "") { a.append(DEFFLD['form_but'].html); } }
首先頁(yè)面的布局是這樣的
其中控件的屬性值主要是在li特定屬性中進(jìn)行控制。上邊代碼就是根據(jù)json字符串進(jìn)行對(duì)li進(jìn)行賦值的。當(dāng)表單如果要兩行布局的時(shí)候?qū)挾葧?huì)進(jìn)行增加
function createField(r, q, num) { if (!q) { return } var p, o, l, m; // r.removeClass('one two three oneByOne fieldInstruct'); // r.attr('title', '點(diǎn)擊編輯,拖動(dòng)排序'); r.empty(); $('#nofields').hide(); $('#formButtons').show(); l = $(DEFFLD[q.TYP].html); //l.attr("name","F"+num); if ('goods' == q.TYP && '1' == q.NOIMG) { l = $(DEFFLD.goodsnoimg.html) } if (q.TYP === 'html' || q.TYP === 'section') { p = l.find('label.desc'); m = l.find('div.content') } else { p = l.filter('label.desc'); m = l.filter('div.content') } if (q.TYP === 'likert') { p = m.find('label.desc') } o = p.find('span'); if (q.REQD === '1') { o.removeClass('hide') } p.text(q.LBL); p.append(o); if (q.TYP === 'text' && '1' == q.QRINPUT) { m.find('i.qrinput').removeClass('hide') m.find('text').attr('name', 'F' + num); } else { if (q.TYP === 'phone' && q.FMT) { m.html(DEFFLD[$.format('phone_{0}_{1}', q.FMT, M.LANG)]); '1' == q.AUTH ? m.find('.sendcode').show() : m.find('.sendcode').hide(); '1' == q.AUTH ? $('#signcnt').show() : $('#signcnt').hide() } else { if (q.TYP === 'date' && q.FMT) { m.html(DEFFLD[$.format('date_{0}', q.FMT)]) } else { if (q.TYP === 'name' && q.FMT) { if (q.FMT === 'short') { m.html(DEFFLD.name_short) } else { m.html(DEFFLD[$.format('name_{0}_{1}', q.FMT, M.LANG)]) } } else { if (q.TYP === 'address') { m.html(DEFFLD[$.format('address_{0}', M.LANG)]); if (q.DEF) { var g = q.DEF.split('-'); m.find('select.province').empty().append($.format('<option>{0}</option>', g[0] || '省/自治區(qū)/直轄市')); m.find('select.city').empty().append($.format('<option>{0}</option>', g[1] || '市')); m.find('select.zip').empty().append($.format('<option>{0}</option>', g[2] || '區(qū)/縣')) } } else { if (q.TYP === 'radio') { createRadioItemsPreview(q, m) } else { if (q.TYP === 'checkbox') { m.empty(); var b; var a; var i = false; $.each(q.ITMS, function (j, c) { if (c.IMG) { i = true; return false } }); $.each(q.ITMS, function (j, c) { b = $(DEFFLD.item_checkbox_f); b.find('label').text(c.VAL); b.find(':checkbox').prop('checked', c.CHKED === '1'); if (i) { if (c.IMG) { a = $('<div class=\'goods-item\'><div class=\'image-center\'><img class=\'img\' src=\'' + IMAGESURL + c.IMG + '\'/></div><div class=\'text-wapper center\'><span>' + b.html() + '</span></div></div>') } else { a = $('<div class=\'goods-item\'><div class=\'image-center\'><img class=\'img\' src=\'\'/></div><div class=\'text-wapper center\'><span>' + b.html() + '</span></div></div>') } m.append(a) } else { m.append(b) } }) } else { if (q.TYP === 'image') { m.find('img').attr('src', q.IMG ? IMAGESURL + q.IMG : '/rs/images/defaultimg.png') //m.find('img').attr('name','F'+num); } else { if (q.TYP === 'goods') { createGoodsItemsPreView(q, m) } else { if (q.TYP === 'section') { m.html($.enterToBr((q.SECDESC || ''))) } else { if (q.TYP === 'html') { m.html($.encodeScript(q.HTML || '')) } else { if (q.TYP === 'likert') { createLikertPreview(q, l) } else { if (q.TYP === 'dropdown2') { var d = q.pN || '2'; if (d !== '2') { d = parseInt(d); m.find('select').remove(); for (var f = 0; f < d; f++) { m.append('<select disabled="disabled" class="input"></select>') } m.find('select').css({ width: (100 / d - 1) + '%', 'margin-right': '1%' }) } for (var e = 0; e < q.ITMS.length; e++) { if (q.ITMS[e].CHKED === '1') { m.find('select:first').empty().append($.format('<option>{0}</option>', q.ITMS[e].VAL)); break } } } } } } } } } } } } } } } if (q.TYP === 'dropdown') { $.each(q.ITMS, function (j, c) { if (c.CHKED === '1' && c.VAL) { m.find('select').append($.tmpl('<option selected="true">${$data}</option>', c.VAL)); // return false } else { m.find('select').append($.format('<option>{0}</option>', c.VAL)); } }) } if (q.DEF) { var s = [ 'text', 'textarea', 'number', 'ulr', 'email', 'money', 'phone' ]; if ($.inArray(q.TYP, s) >= 0) { if (q.TYP === 'phone' && q.FMT === 'tel') { $.each(q.DEF.split('-'), function (j, c) { m.find(':text:eq(' + j + ')').val(c) }) } else { l.find(':input').val(q.DEF) } } } if (q.FLDSZ) { m.find(':text,textarea,select').removeClass('s m xxl').addClass(q.FLDSZ) } var h = $(DEFFLD.instruct); if (q.INSTR) { h.text(q.INSTR) } r.append(DEFFLD.icon).append(l).append(h).append(DEFFLD.fieldActions); if (isInstruct(q.TYP)) { r.addClass('fieldInstruct') } if (q.LAY) { r.addClass(q.LAY) } if (q.SCU == 'pri') { r.addClass('private') } m.find(':text,textarea,select,img,hidden').attr('name', 'F' + num); }
看完上述內(nèi)容,你們掌握怎么在.net中使用jquery自定義表單的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。