grid

参考示例：TextBoxList：多选输入智能提示框

创建TextBoxList

<input id="tbl1" class="mini-textboxlist" required="true" style="width:250px;"
        url="../data/DataService.aspx?method=FilterCountrys" value="cn,usa" text="中国,美国"
        valueField="id" textField="text" onvaluechanged="onValueChanged"/>

            

数据结构

[
    { id: "usa", text: "美国" },
    { id: "cn", text: "中国" },
    { id: "jp", text: "日本" },
    { id: "en", text: "英国" },
    { id: "de", text: "德国" },
    { id: "fr", text: "法国" },
    { id: "ca", text: "加拿大" },
    { id: "at", text: "奥地利" },
    { id: "ch", text: "瑞士" }
]

参考示例：AutoComplete：输入智能提示框          
           

创建AutoComplete

数据结构

[
    { id: "usa", text: "美国" },
    { id: "cn", text: "中国" },
    { id: "jp", text: "日本" },
    { id: "en", text: "英国" },
    { id: "de", text: "德国" },
    { id: "fr", text: "法国" },
    { id: "ca", text: "加拿大" },
    { id: "at", text: "奥地利" },
    { id: "ch", text: "瑞士" }
]

参考示例： TreeSelect：树形选择框

           

创建TreeSelect

数据结构

[
    {id: "base", text: "Base", expanded: false},
    
    {id: "ajax", text: "Ajax", pid: "base"},
    {id: "json", text: "JSON", pid: "base"},
    {id: "date", text: "Date", pid: "base"},
    {id: "control", text: "Control", pid: "base"},

    {id: "forms", text: "Forms", expanded: false},
    
    {id: "button", text: "Button", pid: "forms"},
    {id: "listbox", text: "ListBox", pid: "forms"},
    {id: "checkboxlist", text: "CheckBoxList", pid: "forms"},
    
    {id: "lists", text: "Lists", expanded: false},
    
    {id: "datagrid", text: "DataGrid", pid: "lists"},            
    {id: "tree", text: "Tree", pid: "lists"},
    {id: "treegrid", text: "TreeGrid ", pid: "lists"},

    {id: "layouts", text: "Layouts", expanded: false},
    
    {id: "panel", text: "Panel", pid: "layouts"},
    {id: "splitter", text: "Splitter", pid: "layouts"},
    {id: "layout", text: "Layout ", pid: "layouts"},

    {id: "navigations", text: "Navigations", expanded: false},
        
    {id: "pager", text: "Pager", pid: "navigations"},
    {id: "tabs", text: "Tabs", pid: "navigations"},
    {id: "navbar", text: "OutlookBar", pid: "navigations"},
    {id: "menu", text: "Menu", pid: "navigations"}

]

参考示例：Spinner：数字输入框          

           

创建Spinner

<input id="sp1" class="mini-spinner"  minValue="200" maxValue="250"/>

参考示例：DatePicker：日期选择框

           

创建DatePicker        

只需要一个id即可创建表单对象：     

<input id="date1" class="mini-datepicker"  />
         

Date & Time

<input id="date2" class="mini-datepicker" style="width:200px;" format="yyyy-MM-dd H:mm" showTime="true" />

参考示例：ComboBox：联动选择

一：创建两个ComboBox 

<span>部门</span><br />
<input id="deptCombo" class="mini-combobox" style="width:150px;" textField="name" valueField="id" 
    onvaluechanged="onDeptChanged" url="../data/DataService.aspx?method=GetDepartments"
    showNullItem="true"
        />         
<br /><br />
<span>职位</span><br />
<input id="positionCombo" class="mini-combobox" style="width:150px;" textField="name" valueField="id" />  
            

二：valuechanged加载第二个ComboBox

function onDeptChanged(e) {
    var id = deptCombo.getValue();
    positionCombo.setValue("");
    var url = "../data/DataService.aspx?method=GetPositionsByDepartmenId&id=" + id
    positionCombo.setUrl(url);            
}

参考示例：ComboBox：下拉选择框

创建ComboBox

<input id="combo1" class="mini-combobox" style="width:150px;" textField="text" valueField="id" 
    url="../data/countrys.txt" value="cn" showNullItem="true" /> 
            

多选 + 多列

<div class="mini-combobox" style="width:250px;"  popupWidth="400" textField="text" valueField="id" 
    url="../data/countrys.txt" value="cn,usa" multiSelect="true"  >     
    <div property="columns">
        <div header="ID" field="id"></div>
        <div header="国家" field="text"></div>
    </div>
</div>

参考示例：TextBox：文本输入框

创建代码

单行输入框：<input class="mini-textbox" value="0" /> <br /><br />
密码输入框：<input class="mini-password" value="12345"  /> <br /><br />
多行输入框：<input class="mini-textarea" value="中国"  /> <br />
 

参考示例：
                ButtonEdit：按钮输入框    
                弹出面板    
                弹出选择树
      
           

创建ButtonEdit

buttonclick事件

$.ajax({
    url: "../data/FormService.aspx?method=LoadData",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});

提交表单

function onButtonEdit(e) {
    alert("弹出选择");
}