设为首页收藏本站

jQuery MiniUI

 找回密码
 立即注册
jQuery MiniUI › 论坛 › MiniUI › BUG报告和需求建议 › datagrid
12下一页
返回列表 发新帖
查看: 10115|回复: 10
打印 上一主题 下一主题

datagrid [复制链接]

liyang1987ly

Rank: 4
跳转到指定楼层
楼主
发表于 2012-7-4 17:00:11 |只看该作者 |倒序浏览

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!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">
<title>用户管理</title>
<link href="miniui/css/demo.css" rel="stylesheet" type="text/css" />
<script src="miniui/scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="miniui/scripts/miniui/miniui.js" type="text/javascript"></script>
<link href="miniui/scripts/miniui/themes/default/miniui.css"
    rel="stylesheet" type="text/css" />
<link href="miniui/scripts/miniui/themes/icon.css" rel="stylesheet"
    type="text/css" />
<!--<link href="scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />-->
<link href="miniui/scripts/miniui/themes/icons.css" rel="stylesheet"
    type="text/css" />
<style type="text/css">
html,html body {
    padding: 0;
    border: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: Verdana;
    font-size: 12px;
    line-height: 22px;
}
</style>

</head>
<body>

    <div class="mini-panel" title="用户管理界面" style="width:100%;height:100%;"
        borderStyle="border:0" showToolbar="true" showCollapseButton="false"
        showFooter="true" showHeader="true" bodyStyle="padding:0;">

        <!--toolbar-->
        <div property="toolbar" class="mini-toolbar"
            style="padding:2px;border:0;">
            <table style="width:100%;">
                <tr>
                    <td style="white-space:nowrap;"><label
                        style="font-family:Verdana;">用户名: </label> <input
                        class="mini-textbox" id="key" name="userName" /> <a class="mini-button"
                        iconCls="icon-search" plain="true">查询</a>
                        <a class="mini-button" iconCls="icon-add"
                        onclick="addUser()">添加</a>
                        <a class="mini-button" iconCls="icon-update"
                        onclick="editUser()">修改</a>
                        <a class="mini-button" iconCls="icon-remove"
                        onclick="removeUsser()">删除</a></td>
                </tr>
            </table>
        </div>

        <!--body-->
        <div class="mini-fit" style="height:100%;">
            <div id="datagrid1" class="mini-datagrid"
                style="width:100%;height:100%;" borderStyle="border:0"
                url="user/getUserAll.do" idField="userId"allowResize="true" pageSize="10"
            allowCellEdit="true" allowCellSelect="true" multiSelect="true">
                <!-- allowAlternating 是否显示斑马线
                     showFooter="false" 是否显示底部
                     resultAsData="true" 解析json[{"userName":"admin","userId":1,"loginName":"admin","loginPass":"admin","autValue":0,"autId":1}]
                 -->
                <div property="columns">
                    <div type="checkcolumn"></div>
                    <!-- <div type="indexcolumn"></div> -->
                    <div field="userName" width="120" headerAlign="center" align="center"
                        allowSort="true">用户名</div>
                    <div field="loginName" width="120" headerAlign="center" align="center"
                        allowSort="true">登陆名称</div>
                    <div field="loginPass" width="100" renderer="onPassrRenderer"
                        align="center" headerAlign="center">登陆密码</div>
                    <div field="autValue" width="100" allowSort="true" headerAlign="center" align="center"
                        renderer="userRight">用户角色</div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript">
        mini.parse();
        var grid = mini.get("datagrid1");
        grid.load();
        grid.sortBy("userId", "desc");//依据userId倒序排序
        var wid = document.body.clientWidth/2;
        var hei = document.body.clientHeight;
        //根据返回的值判断是普通用户还是管理员 0管理员 1普通用户
        function userRight(e) {
            if (e.value == 0) {
                return "管理员";
            } else {
                return "普通用户";
            }
        }
        function onPassrRenderer(e){
            var reg = /\w|\d/g;
            var va = "";
            if(e.value!=""){
                va = e.value;
                va = va.replace(reg,"*");
               
            }
            return va;
        }
        //获取查询条件
        function getValue(){
            var userName = mini.get("key").getValue();
            return userName;
        }
        //根据条件查询
        function serch(){
                grid.load({'userName':getValue()});
        }
          $("#key").bind("keydown", function (e) {
            if (e.keyCode == 13) {
                serch();
            }
        });
        //添加用户
        function addUser(){
             mini.open({
                url: mini_JSPath + "../../../handleUser.jsp",
                title: "新增用户", width: 600, height: 400,
                onload: function () {
                    var iframe = this.getIFrameEl();
                    var data = { action: "new"};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {
                    grid.reload();
                }
            });
            
        }
        //修改用户
        function editUser(){
            var row = grid.getSelected();//获取当前选中行
            if(row){
                mini.open({
                url: mini_JSPath + "../../../handleUser.jsp",
                title: "修改用户", width: wid, height: hei,
                onload: function () {
                    var iframe = this.getIFrameEl();
                  
                    var data = { action: "edit",id:row.userId};
                    iframe.contentWindow.SetData(data);
                },
                ondestroy: function (action) {
                    grid.reload();
                }
            });
            }else{
                mini.alert("请选择一条记录");
            }
        
        }
        //删除用户
        function removeUsser(){
            var rows = grid.getSelecteds( );//获取当前选中行
            if(rows.length>0){
                mini.confirm("确定删除记录吗","确定",function(action){
                    var ids = [];
                    for( var i = 0;i<rows.length;i++){
                        var r = rows[i];
                        ids.push(r.userId);//必须对应的idField="userId"
                    }
                    var id = ids.join(",");
                    if(action=="ok"){
                            $.post("user/removeUserById.do",{"userId":id},function(data){
                                if(data.success == "true"){
                                    mini.alert("删除成功");
                                    grid.reload();
                                }
                            });
                    }
                });
            }else{
                mini.alert("请选择记录");
            }
        }
    </script>
</body>
</html>

为什么grid.sortBy("userId", "desc");//依据userId倒序排序
我加上了 还是不能排序啊
还有就是  allowSort="true"  为什么也不行啊 点击列头

举报

factory

Rank: 8Rank: 8
沙发
发表于 2012-7-4 17:30:32 |只看该作者
你服务端处理了没？ 排序我们是服务端排序，客户端暂不支持

举报

liyang1987ly

Rank: 4
板凳
发表于 2012-7-4 21:07:58 |只看该作者
factory 发表于 2012-7-4 17:30
你服务端处理了没？ 排序我们是服务端排序，客户端暂不支持

哦 知道了 谢谢 对了 上次提的建议 就是 一个文本框 可以写默认的提示 获取焦点的时候 然后提示就没有了 像ext那样的

举报

niko

Rank: 9Rank: 9Rank: 9
地板
发表于 2012-7-4 21:43:34 |只看该作者
已经加入了，请参考示例：http://www.miniui.com/demo/#src=textbox/textbox.html。
更新版本就可以了。

举报

liyang1987ly

Rank: 4
5#
发表于 2012-7-4 23:19:09 |只看该作者
本帖最后由 liyang1987ly 于 2012-7-4 23:28 编辑
niko 发表于 2012-7-4 21:43
已经加入了，请参考示例：http://www.miniui.com/demo/#src=textbox/textbox.html。
更新版本就可以了。 ...

不是6月13那个版本吗？
还有就是我怎么默认的就是蓝色的
<script src="miniui/scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="miniui/scripts/miniui/miniui.js" type="text/javascript"></script>
<link href="miniui/scripts/miniui/themes/default/miniui.css"
    rel="stylesheet" type="text/css" />
    <link href="miniui/css/demo.css" rel="stylesheet" type="text/css" />
<link href="miniui/scripts/miniui/themes/icon.css" rel="stylesheet"
    type="text/css" />
<link href="scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
<link href="miniui/scripts/miniui/themes/icons.css" rel="stylesheet"
    type="text/css" />
我这样加了怎么不管用啊

举报

factory

Rank: 8Rank: 8
6#
发表于 2012-7-5 09:41:38 |只看该作者
liyang1987ly 发表于 2012-7-4 23:19
不是6月13那个版本吗？
还有就是我怎么默认的就是蓝色的

你可以去直接下网站上最新的版本

举报

liyang1987ly

Rank: 4
7#
发表于 2012-7-5 12:15:46 |只看该作者
本帖最后由 liyang1987ly 于 2012-7-5 12:25 编辑
factory 发表于 2012-7-5 09:41
你可以去直接下网站上最新的版本


http://www.miniui.com/download/ 我在这下载的 啊 这个不是最新的吗 java for myeclipse

<script src="miniui/scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="miniui/scripts/miniui/miniui.js" type="text/javascript"></script>
<link href="miniui/scripts/miniui/themes/default/miniui.css"
    rel="stylesheet" type="text/css" />
    <link href="miniui/css/demo.css" rel="stylesheet" type="text/css" />
<link href="miniui/scripts/miniui/themes/icon.css" rel="stylesheet"
    type="text/css" />
<link href="scripts/miniui/themes/blue/skin.css" rel="stylesheet" type="text/css" />
为什么背景色没有改变啊  不是应该是蓝色吗
像官方网站似的 我选择某个皮肤 对应的datagrid就会变了 我现在写成默认的怎么不行啊

举报

niko

Rank: 9Rank: 9Rank: 9
8#
发表于 2012-7-5 13:55:14 |只看该作者
你参考下这个例子：
http://miniui.com/demo/#src=datagrid/celledit.html

我们在此页面加入蓝色皮肤样式，是可以的。

举报

liyang1987ly

Rank: 4
9#
发表于 2012-7-5 14:24:42 |只看该作者
niko 发表于 2012-7-5 13:55
你参考下这个例子：
http://miniui.com/demo/#src=datagrid/celledit.html

已经解决

举报

sleep0402

Rank: 2
10#
发表于 2013-2-13 02:49:54 |只看该作者
楼主我action传过来的值一直报json error的错啊。能不能分享一下后台还有配置代码

举报

12下一页
返回列表 发新帖

Archiver|普加软件

GMT+8, 2024-11-25 13:48 , Processed in 1.039282 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部