jQuery MiniUI

标题: datagrid [打印本页]

作者: liyang1987ly 时间: 2012-7-4 17:00:11 标题: datagrid

<%@ 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="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;">

      
      <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>

      
      <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">
            
            <div property="columns">
                  <div type="checkcolumn"></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 时间: 2012-7-4 17:30:32

你服务端处理了没？排序我们是服务端排序，客户端暂不支持

作者: liyang1987ly 时间: 2012-7-4 21:07:58

factory 发表于 2012-7-4 17:30
你服务端处理了没？排序我们是服务端排序，客户端暂不支持

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

作者: niko 时间: 2012-7-4 21:43:34

已经加入了，请参考示例：http://www.miniui.com/demo/#src=textbox/textbox.html。
更新版本就可以了。

作者: liyang1987ly 时间: 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 时间: 2012-7-5 09:41:38

liyang1987ly 发表于 2012-7-4 23:19
不是6月13那个版本吗？
还有就是我怎么默认的就是蓝色的

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

作者: liyang1987ly 时间: 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 时间: 2012-7-5 13:55:14

你参考下这个例子：
http://miniui.com/demo/#src=datagrid/celledit.html

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

作者: liyang1987ly 时间: 2012-7-5 14:24:42

niko 发表于 2012-7-5 13:55
你参考下这个例子：
http://miniui.com/demo/#src=datagrid/celledit.html

已经解决

作者: sleep0402 时间: 2013-2-13 02:49:54

楼主我action传过来的值一直报json error的错啊。能不能分享一下后台还有配置代码

作者: niko 时间: 2013-2-13 11:08:49

sleep0402 发表于 2013-2-13 02:49
楼主我action传过来的值一直报json error的错啊。能不能分享一下后台还有配置代码 ...

后台只要正确处理JSON就可以了。
具体可以先参考demo/data/AjaxService.jsp里面的后台处理代码

欢迎光临 jQuery MiniUI (http://miniui.com/discuss/)