jQuery +UI + flexigrid做的一个用户管理界面,
jQuery 版本必须是最新的 1.2.6 否则就出错,我折腾了1天的UI.jQuery
目前症状为IE下不显示表格中的数据
list.html
manage_user.js
user.php 的部分
目前症状为IE下不显示表格中的数据
list.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>会员管理</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../resources/css/jq/default/ui.all.css">
<link rel="stylesheet" type="text/css" href="../resources/css/flexigrid/flexigrid.css">
<script type="text/javascript" src="../resources/js/jquery.js"></script>
<script type="text/javascript" src="../resources/js/jquery.ui.all.js"></script>
<script type="text/javascript" src="../resources/js/jquery.form.js"></script>
<script type="text/javascript" src="../resources/js/flexigrid.js"></script>
<script type="text/javascript" src="../resources/js/manage_user.js"></script>
<style>
.flexigrid div.fbutton .add
{
background: url(../resources/css/images/add.png) no-repeat center left;
}
.flexigrid div.fbutton .delete
{
background: url(../resources/css/images/close.png) no-repeat center left;
}
</style>
</head>
<body>
<!--
<div id="grid"></div>
<div id="panle" style="display:none;">
-->
<!-- 据lichuhui大大说改成table就可以,我这没IE测试不了 -->
<table id="grid"></table>
<table id='panle' style='display:none'/>
<div id="dialog_div">
<form action="?module=user&act=insertorupdate" id="dialog_form">
<input type="hidden" name="MemberID"/>
登录名:<input type="text" name="UserName"/><br/>
密码:<input type="password" name="PassWord"/><br/>
真实名称:<input type="text" name="LinkMan"/><br/>
联系电话:<input type="text" name="OperateTel"/><br/>
Email:<input type="text" name="Email"/><br/>
</form>
</div>
</div>
</body>
</html>
manage_user.js
$(function(){
$('#dialog_div').dialog({
hide:'', //点击关闭是隐藏,如果不加这项,关闭弹窗后再点就会出错.
autoOpen:false,
height:250,
modal:true, //蒙层
title:'个人用户管理',
overlay: {
opacity: 0.5,
background: "black"
},
buttons:{
'提交':function(){
addUser();
},
'取消':function(){
$(this).dialog("close");
},
'重置':function(){
$(this).children('form')[0].reset();
}
}
});
$('#grid').flexigrid({
url: '?module=user&act=list&isajax=1',
dataType: 'json',
colModel : [
{
display: 'id',
name : 'MemberID',
width:50, //得加上 要不IE报错
hide:true
},
{
display: '登录名',
name : 'UserName',
width : 150,
sortable : true,
align: 'center'
},
{
display: '密码',
name : 'PassWord',
width : 150,
hide:true
},
{
display: '真实姓名',
name : 'LinkMan',
width : 100,
sortable : true,
align: 'left'
},
{
display: '联系电话',
name : 'OperateTel',
width : 150,
sortable : true,
align: 'left'
},
{
display: 'Email',
name : 'Email',
width : 250,
sortable : true,
align: 'left'
}
],
buttons : [
{
name: '添加',
bclass: 'add',
onpress : call
},
{
name: '修改',
bclass: 'add',
onpress : call
},
{
name: '删除',
bclass: 'delete',
onpress : call
},
{
separator: true
}
],
searchitems : [
{
display: '登录名',
name : 'UserName'
},
{
display: 'Email',
name : 'Email'
}
],
sortname: "memberid",
sortorder: "asc",
usepager: true,
title: '用户管理',
useRp: true,
rp: 20,
showTableToggleBtn: true,
width: 750,
height: 400
});
});
/**
* 更新用户
*/
function call(com,grid) {
switch (com) {
case '添加':
$('#dialog_div').dialog('open').children('form')[0].reset();
break;
case '修改':
selected_count=$('.trSelected',grid).length;
if (selected_count==0) {
alert('请选择一条记录');
return;
}
if(selected_count>1){
alert('抱歉只能同时修改一条');
return;
}
data=new Array();
$('.trSelected td',grid).each(function(i){
data[i]=$(this).children('div').text();
});
form=$('#dialog_div').dialog('open').children('form');
form.children('input[name=MemberID]').val(data[0]);
form.children('input[name=UserName]').val(data[1]);
form.children('input[name=PassWord]').val(data[2]);
form.children('input[name=LinkMan]').val(data[3]);
form.children('input[name=OperateTel]').val(data[4]);
form.children('input[name=Email]').val(data[5]);
$('#dialog_div').dialog('open');
break;
case '删除':
names='';
$('.trSelected td:nth-child(2) div',grid).each(function(i){
if(i)names+=',';
names+=$(this).text();
});
ids='';
$('.trSelected td:nth-child(1) div',grid).each(function(i){
if(i)ids+=',';
ids+=$(this).text();
})
if(confirm("确定删除用户["+names+"]?")){
delUser(ids);
}
break;
}
}
function addUser(){
$('#dialog_form').ajaxSubmit({
type:'POST',
dataType:'json',
resetForm:true,
success:function(){
$('#grid').flexReload();
}
});
}
function delUser(ids){
$.ajax({
url:'?module=user&act=delete',
data:{
MemberID:ids
},
type:'POST',
dataType:'json',
success:function(){
$('#grid').flexReload();
}
});
}
user.php 的部分
function onList(){
$in = &$this->in;
$tpl = &$this->tpl;
$dataset = &$this->objDataSet;
$isAjax = $in['isajax'];
$page = $_POST['page'];
$rp = $_POST['rp'];
$sortname = $_POST['sortname'];
$sortorder = $_POST['sortorder'];
if (!$sortname) $sortname = 'MemberID';
if (!$sortorder) $sortorder = 'desc';
$sort = "ORDER BY $sortname $sortorder";
if (!$page) $page = 1;
if (!$rp) $rp = 10;
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp ";
$sql="select MemberID,UserName,PassWord,LinkMan,OperateTel,Email from user $sort";
$total=$dataset->runSql("select count(*) as total from user");
$total=(int)$total['total'];
$result=$dataset->getLista($sql,$rp,$start);
// $this->fp->fb($result);
$ret="{'page':$page,'total':$total,'rows':[";
foreach($result as $key=>$row){
if($key>0)$ret.=",";
$ret.="{'id':".$row[MemberID].",";
$ret.="'cell':[";
$i=0;
foreach($row as $k=>$val){
if($i)$ret.=",";
$ret.="'".$val."'";
$i++;
}
$ret.="]}";
}
$ret.="]}";
if($isAjax){
$tpl->assign('ret',$ret);
$tpl->display('./rep.json');
}else{
// $tpl->assign('entities',$result);
$tpl->display(SKIN_FILE.'user/list.html');
}
}
//会员添加
function onInsertOrUpdate(){
$in = &$this->in;
$tpl = &$this->tpl;
$dataset = &$this->objDataSet;
$data = array(
UserName => trim($in[UserName]),
PassWord => $in[PassWord],
Email => trim($in[Email]),
OperateTel => trim($in[OperateTel]),
LinkMan => trim($in[LinkMan]),
CreateTime => time(),
);
if(!empty($in['MemberID'])){
$MemberID = $dataset->update($data,"MemberID=".$in['MemberID'],"user");
}else{
$data['PassWord']=md5($data['PassWord']);
$MemberID = $dataset->insert($data,"user");
}
$ret=json_encode(array('succees'=>true,'msg'=>'更新成功!'));
$tpl->assign('ret',$ret);
$tpl->display('./rep.json');
}
function onDelete(){
$in = &$this->in;
$tpl = &$this->tpl;
$dataset = &$this->objDataSet;
$dataset->delete("MemberID in(0,".$in['MemberID'].")",'user');
$ret=json_encode(array('succees'=>true,'msg'=>'删除成功!'));
$tpl->assign('ret',$ret);
$tpl->display('./rep.json');
}