This chapter describes how to , Will a model The data shows that form In the form ( Generally used to edit pages )

The code is as follows ( Connection address :https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html):

<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title> Data binding </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="../css/bootstrap.css">
<!-- Custom site style -->
<link rel="stylesheet" href="../css/site.css">
<script src="../lib/jquery.js"></script>
<script src="../lib/bootstrap.js"></script>
<!-- Tool method -->
<script src="../scripts/global.js"></script>
<!-- plug-in unit -->
<script src="../scripts/plugin.js"></script>
</head> <body>
<div class="panel panel-default">
<div class="panel-heading">
<label> Data binding </label>
<div class="pull-right">
<button id="btnSubmit" class="btn btn-primary btn-xs"> Submit Form </button>
</div>
</div> <div class="panel-body">
<form action="#" id="formContainer" class="form form-horizontal"></form>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading"><label> Introduce </label></div>
<div class="panel-body">
<h3 class="lead"> Form data binding </h3>
<blockquote>
<p> take json Format model Bind to the form , Here we use simulated model data , In the actual environment, we should interact with the server to get the data , In the configuration object, you need a callback method , You can do some other operations of the form in the return method , Such as adding form validation 、 Add date plug-in support ====</p>
<p>note: The data source of the check box is an array </p>
</blockquote>
</div>
</div>
<script>
$(function () {
var eles=[
[
{label:{text:' Custom user name :'},ele:{type:'text',name:'UserName',title:' user name :',required:true}},
{ele:{type:'radio',name:'sex',title:' Gender :',items:[{text:' male ',value:1},{text:' Woman ',value:2}]}},
{ele:{type:'checkbox', name:'plant',title:' Using platform :',items:[{text:'APP',value:'app'},{text:'web',value:'web'}]}}
],
[
{ele:{type:'select',name:'province',title:' Province :',withNull:true,items:[{text:' guangdong ',value:'GD'},{text:' hunan ',value:'HN'}]}},
{ele:{pre:{text:'<input type="radio">'},type:'text',name:'displayName',title:' The display name :'}},
{ele:{type:'search',title:' product ',id:'ProductName'}}
],
[
{ele:{type:'datetime',name:'FromeDate',title:' The period of validity :'}},
{ele:{type:'datetime',name:'ToDate',title:'~'}},
]
];
// Hidden form elements are mainly used to distinguish the background when editing
var hides = [{ id: 'primaryKey' }];
var bsForm = new BSForm({ eles: eles, hides: hides, autoLayout: '1,3' }).Render('formContainer',function(bf){
var model={primaryKey:1,UserName:'xxg',sex:1,plant:['app','web'],province:'GD',displayName:'TEST',ProductName:' The notebook ',FromeDate:'2015-06-10',ToDate:'2015-08-08'};
bf.InitFormData(model);
}); $("#btnSubmit").bind('click',function () {
var postData=bsForm.GetFormData();
alert(" The expression data obtained is :"+JSON.stringify(postData));
})
});
</script>
</body></html>

Use here js Created a json Type of model, In actual development It will interact with the server and get a model, Through the form plug-in InitFormData Methods will model According to the form In the form

The renderings are as follows :

The defined data is successfully displayed in the form ,

note: In the case of multiple check boxes , What you need to return is an array

Last chapter :BootStrap Smart form series 5、 ... and   Forms depend on plug-in processing

Next chapter :BootStrap Smart form series 7、 ... and Validation support

The first page of this series :BootStrap Smart form series home page ( It's over )

BootStrap Smart form series 6、 ... and Form data binding ( Edit page data binding ) More articles about

  1. BootStrap Smart form series 5、 ... and Forms depend on plug-in processing

    This chapter is relatively simple , It mainly refers to some subsequent processing operations after the production of form elements , For example, the rendering of the date plug-in . some autocomplete And so on , Just deal with it in the callback , demo: $("input.date-pic ...

  2. BootStrap Smart form series Nine Form image upload support

    This chapter describes how to , Can support upload pictures can preview pictures in time The code is as follows ( Connection address :https://github.com/xiexingen/Bootstrap-SmartForm/blob/maste ...

  3. BootStrap Smart form series Four Introduction to form layout

    Form layout is divided into automatic layout and custom layout : Automatic layout is to automatically use different... According to the length of the array in the second level configuration item bootstrap grid , By setting autoLayout by true Can realize automatic layout Automatic layout is ...

  4. BootStrap Smart form series 8、 ... and Form configuration json Detailed explanation

    This chapter is a high-level part of the series , The configuration of some columns in the form will be introduced 1.config Column configuration : Mainly used to control the layout :config:{autoLayout:true|'1,2,2,4'} true: According to the number of innermost layers of configuration items ...

  5. BootStrap Smart form series home page ( Ongoing update ...)

    background : Native farmer .NET Back-end engineer , In project development, I found that I wrote a lot of repetitive code , So I made a whole set and generated it according to the configuration form Form plug-ins , Changes to the form only need to modify the configuration json that will do It's very practical , So open source came out ...

  6. BootStrap Smart form series 7、 ... and Validation support

    Any page that involves users editing information and then saving it , All involve a check whether the data meet the requirements , Need to verify the customer service side and the server side : The main purpose of customer service verification is to improve the user experience , The server-side verification is for data qualification The plug-in also supports ...

  7. BootStrap Smart form series Ten Auto complete component support

    web In development , There must be something like Baidu .google This kind of search function , What can autocomplete in smart forms do , Let's find out : 1. Inclusion image google. Baidu and other similar simple search 2. The support of complex structure , for instance Enter the product number , Need to be ...

  8. BootStrap Smart form series 3、 ... and Introduction to block form configuration

    I believe that the majority of bloggers must have encountered a situation in which the editing page is divided into many blocks , The smart form plug-in already supports this situation for you , The code is as follows ( Link address :https://github.com/xiexingen/Bootstrap-SmartF ...

  9. Auth Principal component (RBAC) Six tables

    1.RBAC and Auth The difference between be based on RBAC commonly Djagno Will use and Auth Relatively advanced 2.RBAC( role Based Accsess Control) Data transmission between the six tables 2.1 D ...

Random recommendation

  1. Expand easyUI tab Control , Add load mask effect

    We need to use HighChart Show chart , If the quantity returned is too large , Generating charts is a time-consuming process .tab Control has no display mask settings ( At least this dish is not found ), Google For a moment , According to another brother's method , It was used to transform a ...

  2. Super useful 9 individual PHP code snippet

    In developing websites .app Or blog , Code snippets can really save you time . today , Let's share some of my collection of super useful PHP code snippet . Let's have a look ! 1. Create data URI data URI After embedding the image into HTML / CSS ...

  3. HTML series (HTMl+CSS+JavaScript+Jquery)--un

    HTML  Hypertext tag language . Click to see more details HTML Content Include : One . Basic Tags ; Two . Commonly used labels ; 3、 ... and . Forms <form></form>; Four . form <table></t ...

  4. sed Variable substitution hold m.txt In the document $i Replace with $j

    zabbix:/root/zabbix# cat a1.sh for j in {1..48} do sed "s/\$i/$j/g" m.txt >>tmp.txt ...

  5. Android development tool GenyMotion How to install and use

          I haven't contacted again for a long time Android 了 , So much so that GenyMotion It's been so long , I haven't tried it yet , Remember when it was released Android Studio when , I started to try it the same day , ok , notice GenyMotion this ...

  6. C Implementation class 、 Inherit 、 polymorphic

    First consider using C Implementation class It must be to use struct Of , The data members of the class are placed in struct Inside : And classes have constructors . Destructor , These two functions have to be in struct outside , Constructor to assign struct Space and initialize struct member , ...

  7. Spark operator --map and flatMap

    map and flatMap--Transformation Class operator Code example result  

  8. php Object assignment problem in

    There is a problem today , At the beginning of the stitching SQL sentence , If you want to use it many times, it will be reset , And then I thought of giving it a new value , But it turns out that there's something wrong with this assignment , puzzled , Finally, after searching , Find out PHP In fact, the assignment of an object to a variable is ...

  9. css in ul li And ul&gt;li The difference between

    ul li : Descendant selector ,ul All in li Elements , Include ol Inside li ; ul>li : Descendant selector , Next level DOM node , barring ol Inside li . ul>ol>li : Filial generation ...

  10. Synchronous operation of wechat applet

    In the app , Most operations are asynchronous , Some important operations , For example, get important variable values from the Internet , It's got to be worth it , Follow up operations make sense . But asynchronous operations , You have to put the processing in the callback , Code readability is reduced , And contrary to most normal logic . For two days , ...