grid

BlogJava :: 首頁 :: 聯系 :: 聚合

:: 管理

78 Posts :: 0 Stories :: 62 Comments :: 0 Trackbacks

jQuery MiniUI 開發教程表單控件彈出：選擇表格（五）

彈出：選擇表格

參考示例：彈出：選擇表格
                彈出：多選表格
                彈出：多選表格（復雜）
                彈出：選擇表格（JS）

mini.open

mini.open({
    url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html",           
    title: "選擇列表",
    width: 650,
    height: 380,
    ondestroy: function (action) {                  
        if (action == "ok") {
            var iframe = this.getIFrameEl();                        
            var data = iframe.contentWindow.GetData();
            data = mini.clone(data);    //必須

            btnEdit.setValue(data.id);
            btnEdit.setText(data.name);
        }
    }
});

posted @ 2012-10-09 16:49 nikofan 閱讀(2283) | 評論 (0) | 編輯收藏

jQuery MiniUI 開發教程表單控件表單：控件尺寸調整（四）

表單：控件尺寸調整

參考示例：表單：加載、保存

寬度調整

可以在style中直接設置：
<input class="mini-textbox" style="width:200px;"/>

高度調整

如果需要調整按鈕、輸入框、下拉框、日期框等控件的高度，需要通過CSS樣式，如下代碼：

/* button */
.mini-button-text
{
    padding-top:1px;
    padding-bottom:2px;
    
    padding-top:3px\9;
    padding-bottom:1px\9;
}
/* textbox */        
.mini-textbox
{
    height:19px;
}
.mini-textbox-input
{
    height:17px;
    line-height:15px;
}
/* buttonedit */        
.mini-buttonedit
{
    height:19px;
}
.mini-buttonedit-border
{
    height:17px;
}
.mini-buttonedit-input
{
    height:17px;
    line-height:15px;
}
.mini-buttonedit-button
{
    height:13px;
}
.mini-buttonedit-icon
{
       
    width:15px;
    height:14px;
}
.mini-datepicker .mini-buttonedit-icon
{
    background-position:50% 1px;
}

posted @ 2012-10-08 16:45 nikofan 閱讀(3130) | 評論 (1) | 編輯收藏

jQuery MiniUI 開發教程表單控件表單：數據驗證（三）

表單驗證

參考示例：
                驗證規則
                表單驗證
                表單驗證：文本提示
                表單驗證：組合驗證

綁定validation事件

function onUserNameValidation(e) {
    if (e.isValid) {
        if (isEmail(e.value) == false) {
            e.errorText = "必須輸入郵件地址";
            e.isValid = false;
        }
    }
}

validation事件是實現驗證的基礎。

設置vtype

<input class="mini-textbox" vtype="email"/>

TextBox內置了vtype屬性，有如下驗證規則：email、url、int、float、maxLength、minLength、rangeLength、rangeChar、range、date等。

驗證表單

var form = new mini.Form("#form1");
form.validate();
if(form.isValid()){
    alert("驗證成功");
}

posted @ 2012-09-28 16:35 nikofan 閱讀(6702) | 評論 (3) | 編輯收藏

jQuery MiniUI 開發教程表單控件表單：加載、保存（二）

表單：加載、保存

參考示例：表單：加載、保存

創建表單

只需要一個id即可創建表單對象：

var form = new mini.Form("#form1");

加載表單

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

提交表單

//提交表單數據
var form = new mini.Form("#form1");            
var data = form.getData();      //獲取表單多個控件的數據
var json = mini.encode(data);   //序列化成JSON
$.ajax({
    url: "../data/FormService.aspx?method=SaveData",
    type: "post",
    data: { submitData: json },
    success: function (text) {
        alert("提交成功，返回結果:" + text);
    }
});

清除表單

form.clear();

重置表單

form.reset();

posted @ 2012-09-27 16:08 nikofan 閱讀(2707) | 評論 (2) | 編輯收藏

jQuery MiniUI 開發教程表單控件數據綁定（一）

DataBinding：數據綁定

參考示例：DataBinding：數據綁定

數據綁定

數據綁定后：當表格變化時，控件值跟隨變動；控件值修改時，表格單元格內容變動。
最后使用表格的數據提交保存，達到：多次修改、一次保存的效果。

//綁定表單
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);

//綁定控件
db.bindField(textbox, grid, "username");

posted @ 2012-09-26 17:08 nikofan 閱讀(3789) | 評論 (5) | 編輯收藏

jQuery MiniUI 開發教程主框架布局之：Menu（四）

主框架布局之：Menu



  參考示例：主框架布局之：Menu

一：創建界面布局

<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div class="header" region="north" height="70" showSplit="false" showHeader="false">
    </div>
    <div title="south" region="south" showSplit="false" showHeader="false" height="30" >    
    </div>
    <div title="center" region="center" bodyStyle="overflow:hidden;">    
        <!--Splitter-->
        <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
            <div size="180" maxSize="250" minSize="100" showCollapseButton="true">
                
            </div>
            <div showCollapseButton="false">
                
            </div>        
        </div>
    </div>
</div>

其中，Layout實現上、中、下布局；Splitter實現左、右折疊布局。

二：創建Menu

創建Menu控件，放入頂部區域，作為功能操作項。

<ul id="menu1" class="mini-menubar" style="width:100%;"
    url="../data/listTree.txt" onitemclick="onItemClick" 
    textField="text" idField="id" parentField="pid" >
</ul>

url從服務端返回JSON格式如下：

[
    {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" 和 "pid" 組成樹形結構，在創Tree時注意設置 "idField" 、 "parentField" 屬性。

三：創建Tabs

創建Tabs控件，放入Splitter右側區域，作為主操作區域。

<!--Tabs-->
<div id="mainTabs" class="mini-tabs bg-toolbar" activeIndex="0" style="width:100%;height:100%;"      
    bodyStyle="border:0;background:white;">        
    <div title="首頁" url="../../docs/api/overview.html" >        
    </div>
</div>

四：監聽處理"itemclick"事件

function showTab(node) {
    var tabs = mini.get("mainTabs");
    var id = "tab$" + node.id;
    var tab = tabs.getTab(id);
    if (!tab) {
        tab = {};
        tab.name = id;
        tab.title = node.text;
        tab.showCloseButton = true;
        tab.url = node.url;
        tabs.addTab(tab);
    }
    tabs.activeTab(tab);
}
function onItemClick(e) {        
    var item = e.item;
    var isLeaf = e.isLeaf;
    if (isLeaf) {
        showTab(item);
    }            
}

posted @ 2012-09-25 16:09 nikofan 閱讀(1306) | 評論 (0) | 編輯收藏

jQuery MiniUI 開發教程主框架布局之：Tree（三）

主框架布局之：Tree

參考示例：主框架布局之：Tree

一：創建界面布局

<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div class="header" region="north" height="70" showSplit="false" showHeader="false">
    </div>
    <div title="south" region="south" showSplit="false" showHeader="false" height="30" >    
    </div>
    <div title="center" region="center" bodyStyle="overflow:hidden;">    
        <!--Splitter-->
        <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
            <div size="180" maxSize="250" minSize="100" showCollapseButton="true">
                
            </div>
            <div showCollapseButton="false">
                
            </div>        
        </div>
    </div>
</div>    
其中，Layout實現上、中、下布局；Splitter實現左、右折疊布局。

二：創建Tree

創建Tree控件，放入Splitter左側區域，作為功能操作樹。

<!--Tree-->
<ul id="tree1" class="mini-tree" url="../data/listTree.txt" style="width:100%;height:100%;" 
    showTreeIcon="true" textField="text" idField="id" resultAsTree="false"  
    onnodeselect="onNodeSelect">        
</ul>

url從服務端返回JSON格式如下：

[
    {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" 和 "pid" 組成樹形結構，在創Tree時注意設置 "idField" 、 "parentField" 和 "resultAsTree" 屬性。

三：創建Tabs

創建Tabs控件，放入Splitter右側區域，作為主操作區域。

<!--Tabs-->
<div id="mainTabs" class="mini-tabs bg-toolbar" activeIndex="0" style="width:100%;height:100%;"      
    bodyStyle="border:0;background:white;"      
>        
    <div title="首頁" url="../../docs/api/overview.html" >        
    </div>
</div>

四：監聽處理"nodeselect"事件

function showTab(node) {
    var tabs = mini.get("mainTabs");            
    var id = "tab$" + node.id;
    var tab = tabs.getTab(id);
    if (!tab) {
        tab = {};
        tab.name = id;
        tab.title = node.text;
        tab.showCloseButton = true;
        tab.url = node.url;
        tabs.addTab(tab);
    }
    tabs.activeTab(tab);
}        

function onNodeSelect(e) {
    var node = e.node;
    var isLeaf = e.isLeaf;            

    if (isLeaf) {
        showTab(node);
    }
}

posted @ 2012-09-24 10:17 nikofan 閱讀(2952) | 評論 (0) | 編輯收藏

jQuery MiniUI 開發教程主框架布局之：OutlookMenu（二）

主框架布局之：OutlookMenu

參考示例：主框架布局之：OutlookMenu

一：創建界面布局

<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div class="header" region="north" height="70" showSplit="false" showHeader="false">
    </div>
    <div title="south" region="south" showSplit="false" showHeader="false" height="30" >    
    </div>
    <div title="center" region="center" bodyStyle="overflow:hidden;">    
        <!--Splitter-->
        <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
            <div size="180" maxSize="250" minSize="100" showCollapseButton="true">
                
            </div>
            <div showCollapseButton="false">
                
            </div>        
        </div>
    </div>
</div>

其中，Layout實現上、中、下布局；Splitter實現左、右折疊布局。

二：創建OutlookMenu

創建OutlookMenu控件，放入Splitter左側區域，作為功能操作樹。

<div class="mini-outlookmenu" url="../data/outlookmenu.txt" onitemselect="onItemSelect"
idField="id" parentField="pid" textField="text"> </div>
url從服務端返回JSON格式如下：

[
    { id: "user", text: "用戶管理"},
    { id: "addUser", pid: "user", text: "增加用戶", iconCls: "icon-add", url: "../navbartree/navbartree.html" },
    { id: "editUser", pid: "user", text: "修改用戶", iconCls: "icon-edit", url: "../buttonedit/openwindow.html" },
    { id: "removeUser", pid: "user", text: "刪除用戶", iconCls: "icon-remove", url: "../datagrid/datagrid.html" },
        
    { id: "right", text: "權限管理"},
    { id: "addRight", pid: "right", text: "查詢權限", iconCls: "Note", url: "../navbartree/navbartree.html", iconPosition: "top" },
    { id: "editRight", pid: "right", text: "操作權限", iconCls: "Reports", url: "../buttonedit/openwindow.html", iconPosition: "top" }        
]

通過 "id" 和 "pid" 組成樹形結構，在創建OutlookMenu時注意設置 "idField" 和 "parentField" 。

三：創建IFrame

在Splitter右側區域加入一個IFrame元素，作為主操作區域。
<iframe id="mainframe" frameborder="0" name="main" style="width:100%;height:100%;" border="0"></iframe>

四：監聽處理"itemselect"事件

var iframe = document.getElementById("mainframe");
iframe.src = "../datagrid/datagrid.html#1"

function onItemSelect(e) {
    var item = e.item;
    iframe.src = item.url;
}

posted @ 2012-09-20 17:10 nikofan 閱讀(3000) | 評論 (1) | 編輯收藏

jQuery MiniUI 開發教程主框架布局之：OutlookTree（一）

主框架布局之：OutlookTree

參考示例：主框架布局之：OutlookTree

一：創建界面布局

<!--Layout-->
<div id="layout1" class="mini-layout" style="width:100%;height:100%;">
    <div class="header" region="north" height="70" showSplit="false" showHeader="false">
    </div>
    <div title="south" region="south" showSplit="false" showHeader="false" height="30" >    
    </div>
    <div title="center" region="center" bodyStyle="overflow:hidden;">    
        <!--Splitter-->
        <div class="mini-splitter" style="width:100%;height:100%;" borderStyle="border:0;">
            <div size="180" maxSize="250" minSize="100" showCollapseButton="true">
                
            </div>
            <div showCollapseButton="false">
                
            </div>        
        </div>
    </div>
</div>

其中，Layout實現上、中、下布局；Splitter實現左、右折疊布局。

二：創建OutlookTree

創建OutlookTree控件，放入Splitter左側區域，作為功能操作樹。

<!--OutlookTree-->
<div id="leftTree" class="mini-outlooktree" url="../data/outlooktree.txt" onnodeselect="onNodeSelect"
    textField="text" idField="id" parentField="pid">
</div>
url從服務端返回JSON格式如下：

[
    {id: "user", text: "用戶管理"},        
    {id: "lists", text: "Lists", pid: "user" },            
    {id: "datagrid", text: "DataGrid", pid: "lists"},            
    {id: "tree", text: "Tree" , pid: "lists"},
    ......
]

通過 "id" 和 "pid" 組成樹形結構，在創建OutlookTree時注意設置 "idField" 和 "parentField" 。

三：創建Tabs

創建Tabs控件，放入Splitter右側區域，作為主操作區域。

<!--Tabs-->
<div id="mainTabs" class="mini-tabs bg-toolbar" activeIndex="0" style="width:100%;height:100%;"      
    bodyStyle="border:0;background:white;">        
    <div title="首頁" url="../../docs/api/overview.html" >        
    </div>
</div>

四：監聽處理"nodeselect"事件

function showTab(node) {
    var tabs = mini.get("mainTabs");            
    var id = "tab$" + node.id;
    var tab = tabs.getTab(id);
    if (!tab) {
        tab = {};
        tab.name = id;
        tab.title = node.text;
        tab.showCloseButton = true;
        tab.url = node.url;
        tabs.addTab(tab);
    }
    tabs.activeTab(tab);
}        

function onNodeSelect(e) {
    var node = e.node;
    var isLeaf = e.isLeaf;            

    if (isLeaf) {
        showTab(node);
    }
}

posted @ 2012-09-19 16:35 nikofan 閱讀(2401) | 評論 (0) | 編輯收藏

jQuery MiniUI 開發教程 CRUD之：彈出面板編輯（四）

CRUD之：彈出面板編輯

參考示例：CRUD之：彈出面板編輯

一：創建彈出編輯面板

<div id="editWindow" class="mini-window" title="Window" style="width:650px;" 
    showModal="true" allowResize="true" allowDrag="true"
    >
    <div id="editform" class="form" >
        <input class="mini-hidden" name="id"/>
        <table style="width:100%;">
            <tr>
                <td style="width:80px;">員工帳號：</td>
                <td style="width:150px;"><input name="loginname" class="mini-textbox" /></td>
                <td style="width:80px;">姓名：</td>
                <td style="width:150px;"><input name="name" class="mini-textbox" /></td>
                <td style="width:80px;">薪資：</td>
                <td style="width:150px;"><input name="salary" class="mini-textbox" /></td>
            </tr>
            <tr>
                <td>性別：</td>
                <td><input name="gender" class="mini-combobox" url="mini_JSPath + '../../demo/data/genders.txt'"/></td>
                <td>年齡：</td>
                <td><input name="age" class="mini-spinner" minValue="0" maxValue="200" value="25"  /></td>
                <td>出生日期：</td>
                <td><input name="birthday" class="mini-datepicker" /></td>
            </tr>
            <tr>
                <td style="text-align:right;padding-top:5px;padding-right:20px;" colspan="6">
                    <a class="Update_Button" href="javascript:updateRow()">Update</a> 
                    <a class="Cancel_Button" href="javascript:cancelRow()">Cancel</a>
                </td>                
            </tr>
       
        </table>
    </div>
</div>

二：面板操作

彈出加載面板數據：

var editWindow = mini.get("editWindow");
editWindow.show();
var form = new mini.Form("#editform");
form.loading();
$.ajax({
    url: "../data/DataService.aspx?method=GetEmployee&id=" + row.id,
    success: function (text) {
        var o = mini.decode(text);
        form.setData(o);
        form.unmask();
    },
    error: function () {
        alert("表單加載錯誤");
    }
});

保存提交面板數據：

var form = new mini.Form("#editform");
var o = form.getData();

grid.loading("保存中，請稍后......");
var json = mini.encode([o]);
$.ajax({
    url: "../data/DataService.aspx?method=SaveEmployees",
    data: { employees: json },
    success: function (text) {
                    
        grid.reload();
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(jqXHR.responseText);
    }
});

editWindow.hide();

posted @ 2012-09-18 16:31 nikofan 閱讀(3070) | 評論 (0) | 編輯收藏

僅列出標題

grid

常用鏈接

留言簿(29)

我參與的團隊

隨筆檔案

搜索

最新評論

閱讀排行榜

評論排行榜

mini.open

寬度調整

高度調整

綁定validation事件

設置vtype

驗證表單

創建表單

加載表單

提交表單

清除表單

重置表單

數據綁定

主框架布局之：Menu 參考示例：主框架布局之：Menu

一：創建界面布局

二：創建Menu

三：創建Tabs

四：監聽處理"itemclick"事件

主框架布局之：Tree

一：創建界面布局

二：創建Tree

創建Tree控件，放入Splitter左側區域，作為功能操作樹。

三：創建Tabs

四：監聽處理"nodeselect"事件

主框架布局之：OutlookMenu

一：創建界面布局

二：創建OutlookMenu

三：創建IFrame

四：監聽處理"itemselect"事件

主框架布局之：OutlookTree

一：創建界面布局

二：創建OutlookTree

三：創建Tabs

四：監聽處理"nodeselect"事件

一：創建彈出編輯面板

二：面板操作

主框架布局之：Menu

參考示例：主框架布局之：Menu