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 阅读(2278) | 评论 (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 阅读(3118) | 评论 (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 阅读(6692) | 评论 (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 阅读(2705) | 评论 (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 阅读(3764) | 评论 (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 阅读(1305) | 评论 (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 阅读(2938) | 评论 (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 阅读(2986) | 评论 (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 阅读(2399) | 评论 (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 阅读(3066) | 评论 (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