王非123
- 浏览: 24661 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
刚入职不久，公司前段用jquery easyui写前端实现，最近一段时间一直沉醉在jquery easyui中，不多说，下面是我最近的成果，用easyui的两种方式实现功能。
一种是在js中编写datagrid、window、form等插件，另一种是在body中用class形式编写插件。第一种方式代码量大，个人觉得好理解，第二种方式代码量小，差错时方便查找。
[img]
[/img]
第一种：（代码量大，不易查找）
第二种：（代码量小，以查找）
对第二种方法进行解析
1、在添加内容时，使用文本编辑器KindEditor插件，需要引入其包，但在使用kindeditor时，取不到textarea里面的值，此时需要同步，加入afterBlur:function(){this.sync();具体解析参照链接http://137694047.iteye.com/blog/2051315
2、数据的分页显示，用到了datagrid插件，每页要求显示多少行数据，datagrid中的属性可以配置，更多属性的配置可查看easyui的api，easyui API的链接：http://www.jeasyui.com/
3、创建toolbar，实现添加、显示全部、批量删除、条件查找功能。
在创建这些按钮时，我遇到的问题，添加、显示全部、批量删除按钮添加到页面时，可垂直居中，当把搜索框添加上去后，搜索框不能垂直居中，搜索框的添加，破坏了页面的margin，整了一下午，勉强找到了个解决的办法，但个人觉得不太好，这里还没有找到更好方案，我的结局方案是，将添加、显示全部、批量删除按钮一个div中，并且style="float:left，搜索框放大另外一个div中。
具体代码：
4、添加和更新公用一个window、form，两个功能只需写一个window、form即可，节省代码量
插件中功能的实现调用的方法看上面贴的详细代码
附加：
js中需要添加如下代码，来调整datagrid的自适应度，使其根据浏览器的大小变化而变化。
不添加如上代码，会出现如下图片中的问题
一种是在js中编写datagrid、window、form等插件，另一种是在body中用class形式编写插件。第一种方式代码量大，个人觉得好理解，第二种方式代码量小，差错时方便查找。
[img]
[/img]
第一种：（代码量大，不易查找）
<%@ include file="/common/view/header.jsp"%>
<script type="text/javascript">
var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null,win_pic=null;
var editor = null;
$(document).ready(function(){
//html文本编辑器
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowUpload:true,
filePostName:"picFile",
allowPreviewEmoticons:true,
urlType:'absolute', //返回路径为绝对路径
resizeMode:1, //编辑器只能调整高度
uploadJson:'<%=cp%>/upload/picupload',
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterBlur:function(){this.sync();}
});
});
//create datagrid
$('#dg').datagrid({
url:'<%=cp%>/news/getAllNews',
//title:'新闻信息列表',
pageSize:20,
pageList:[5,10,15,20],
pagination:true,//分页控件
rownumbers:true,//行号
height:document.body.clientHeight,
nowrap: true, //True 就会把数据显示在一行里
striped: true, //奇偶条显示不同的颜色
collapsible:true, //可折叠
remoteSort: false, //是否从服务器给数据排序
idField:'id',
loadMsg:'正在加载....',
columns : [ [
{field:'ck',checkbox:true,width:2}, //显示复选框
{
title : '标题',
field : 'title',
width : 300,
sortable : true,
align : 'center',
formatter:function(value,row,index){
var prefix = "<a href='javascript:void(-1);' onclick='parent.addTab(\"阅读："+row.title+"\",\"<%=cp%>/read/msginfo/"+row.id+"\")'>";
return prefix+row.title;
}
}, {
title : '作者',
field : 'author',
width : 200,
sortable : false,
align : 'center'
}, {
title : '内容',
field : 'content',
width : 380,
hidden:true,
sortable : false,
align : 'center'
}, {
title : '新闻类型',
field : 'typename',
sortable : true,
width : 200,
align : 'center'
}, {
title : '日期',
field : 'date',
width : 200,
sortable : true,
align : 'center'
},
{title:'操作',field:'opition',align:'center',width:200,
formatter:function(value,row,index){
var d='', e = '<a href="javascript:void(-1)" onclick="updatenews('+index+')">更新</a> ',f='';
f = ' <a href="javascript:void(-1)" onclick="deletenews('+index+')">删除</a>';
return d+e+f;
}
}
] ],
toolbar:"#tb",
onDblClickRow:function(rowIndex, rowData){ //双击触发
lookContent(rowIndex);
},
onLoadSuccess:function(){
$('#dg').datagrid('clearSelections'); //加载成功后，消除所有选项
},
onClickRow:function(){ //单击触发
$('#dg').datagrid('clearSelections');
}
});
init_window();
init_form();
initDialog();
});
window.onresize=function(){
$('#dg').datagrid('resize',{height:document.body.clientHeight});
}
/* 初始化窗口控件 */
function init_window(){
var width = 1000;
var height = 500;
var top = (document.body.clientHeight-height)/2;
var left = (document.body.clientWidth-width)/2;
win_add = $('#newsform').window({
closed:true,
width: width,
height: height,
top: top,
left: left,
modal: true
});
win_upt = $('#updt_news').window({
closed:true,
width: width,
height: height,
top: top,
left: left,
modal: true,
});
win_pic = $('#data_win').window({
closed:true,
width: width,
height: height,
top: top,
left: left,
modal: true,
iconCls:'icon-app'
});
}
/* 初始化表单控件 */
function init_form(){
form_add = win_add.find('form');
form_upt = win_upt.find('form');
}
/* 新增新闻 */
function newAddNews(){
win_add.window('setTitle','添加新闻');
win_add.window('open');
form_add.form('clear');
form_add.url = '<%=cp%>/news/addNews';
form = form_add;
}
//数据保存
function saveData(){
form.form('submit', {
url:form.url,
success:function(data){
eval('data='+data);
if (data.success){
$.messager.alert('成功',data.msg);
$('#dg').datagrid('reload');
closeWindow();
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
}
/* 关闭表单窗口 */
function closeWindow(){
if(win_add)
win_add.window('close');
if(win_upt)
win_upt.window('close');
}
/* 执行常规查询 */
function normalQuery(value){
$('#dg').datagrid("reload",{
title: value
});
}
/* 显示全部记录 */
function displayAll(){
$('#dg').datagrid("reload",{title:''});
}
/* 更新新闻 */
function updatenews(index){
var row =$('#dg').datagrid('getRows')[index]; //获取行
if (row){
win_upt.window('setTitle','修改新闻');
win_upt.window('open');
form_upt.form('clear');
form_upt.form('load', '<%=cp%>/news/getNews/'+row.id);
form_upt.url = '<%=cp%>/news/updateNews?id='+row.id;
form = form_upt;
$('#u_title').html(row.title); //$('#u_title')[0].innerHTML = row.title;
editor.html(row.content);
//$('#news_type').combobox('setValue',row.newstype);
} else {
$.messager.show({
title:'警告',
msg:'请您先选择用户资料。'
});
}
}
//删除
function deletenews(index){
$.messager.confirm('提示','您是否确认执行删除操作？',function(r){
if (r){
var row = $('#dg').datagrid('getRows')[index];
if(row && row.id!=null){
$.post('<%=cp%>/news/delNews/'+row.id,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
}
});
}
/* 批量删除 */
function deleterow(){
var rows = $('#dg').datagrid('getSelections');
if(rows==null||rows.length<=0){
$.messager.alert('提示',"请先选择要删除的信息");return false;
}
$.messager.confirm('提示','确定要删除吗?',function(result){
if (result){
var ps = "";
$.each(rows,function(i,n){
if(i==0)
ps += "?id="+n.id;
else
ps += "&id="+n.id;
});
$.post('<%=cp%>/news/del'+ps,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
});
}
/* 数据加载 */
function lookContent(index){
var row = $('#dg').datagrid('getRows')[index];
if (row){
win_pic.window('setTitle','新闻内容');
$('#look_content').html(row.content);
win_pic.window('open');
} else {
$.messager.show({
title:'警告',
msg:'请您先选择数据行。'
});
}
}
/* 打开附件窗口 */
function openAttach(){
$('#fltree').tree({
url:'<%=cp%>/file/fileTree',
animate : true,
checkbox:true,
onlyLeafCheck:true,
onLoadSuccess:function(node,data){
if(data==null || data.length==0){
$('#fltree').append('<li style="font-size:16px;margin-top:10px">暂无附件，请在"附件上传"模块上传。</li>');
}
}
});
$('#fileDialog').dialog('open');
}
function initDialog(){
$('#fileDialog').dialog({
closed:true,
buttons:[{
text:'确定',
handler:fileSubmit
},{
text:'取消',
handler:function(){
$('#fileDialog').dialog('close');
}
}]
});
}
var flid = [],flnms = [];
function fileSubmit(){
var nd = $('#fltree').tree('getChecked');
if(nd.length > 0){
for(var i = 0;i<nd.length;i++) {
flid[i] = nd[i].id;
flnms[i] = nd[i].text;
}
}else {
$.messager.alert('提示','请选择上传的文件','info');
}
if(flnms.length>0){
for(var i=0;i<flnms.length;i++){
var str="<span id='fl_"+i+"'>"+flnms[i]+"[<a href='javascript:void(-1)' onclick='filedel("+i+");'>删除<a>] </span>";
$('#file_tree').append(str);
}
$('#file_tree').show();
}
$('#fileDialog').dialog('close');
}
function filedel(index){
$("#fl_"+index).html("");
oaflcds.slice(index, 1);
oaflnms.slice(index, 1);
}
</script>
</head>
<body style="margin:0">
<table id="dg" ></table>
<%-- 创建toolbar --%>
<div id="tb" style="height:35px;">
<div style="float:left;padding:4px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
</div>
<div style="padding:6px;">
<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
<span style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span>
</div>
</div>
<div id="data_win" class="easyui-window" closed="true" modal="true">
<div id="look_content" style="text-align:center; padding:1px;"></div>
</div>
<!-- data item form for update -->
<div id="updt_news" class="easyui-window" closed="true" modal="true">
<div style="text-align:center; padding:1px;">
<form id="upt_news" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<!-- <td> <span id='u_title'></span></td> -->
<td><input type="text" name="title" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="news_type" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
<!-- data item form for insert -->
<div id="newsform" class="easyui-window" closed="true" modal="true">
<div style="text-align:center; padding:1px;">
<form id="newsinfo_form" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>附件</td>
<td><a href ="javascript:openAttach();">附件上传</a></td>
</tr>
<tr id="file_tree" style="display:none;">
<td colspan="1" ></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="saveData()" id="btn-save" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="closeWindow()" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
<div id="fileDialog" class="easyui-dialog" title="选择上传文件"
data-options="width:300,
height:450,
modal:true,
minimizable:false,
maximizable:false,
collapsible:false,
closed:true, <!-- dialog不自动打开 -->
resizable:false">
<ul id="fltree"></ul>
</div>
</body>
</html>
第二种：（代码量小，以查找）
<%@ include file="/common/view/header.jsp"%>
<script type="text/javascript">
var win_add=null, win_upt=null, form_add=null, form_upt=null, form=null,win_pic=null;
var editor = null;
$(document).ready(function(){
//html文本编辑器
KindEditor.ready(function(K) {
editor = K.create('textarea[name="content"]', {
allowUpload:true,
filePostName:"picFile",
allowPreviewEmoticons:true,
urlType:'absolute', //返回路径为绝对路径
resizeMode:1, //编辑器只能调整高度
uploadJson:'<%=cp%>/upload/picupload',
items : [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterBlur:function(){this.sync();}
});
});
$('#dg').datagrid({
onDblClickRow:function(rowIndex, rowData){ //双击触发
lookContent(rowIndex);
},
onLoadSuccess:function(){
$('#dg').datagrid('clearSelections'); //加载成功后，消除所有选项
},
onClickRow:function(){ //单击触发
$('#dg').datagrid('clearSelections');
}
});
$('#dg').datagrid('resize', {
height:document.body.clientHeight
});
resizeWin('w',0.6,0.9,1500,1000);
resizeWin('data_win',0.6,0.9,1500,1000);
$("#ff").form({
success:function(data){
eval("data="+data);
if (data.success){
$.messager.alert('成功',data.msg);
$("#dg").datagrid("reload");
$('#w').window('close');
} else {
$.messager.alert('错误',data.msg,'error');
}
}
});
initDialog();
});
window.onresize=function(){
$('#dg').datagrid('resize',{height:document.body.clientHeight});
}
/* 标题连接 */
function titleOpeation(value,row,index){
return "<a href='javascript:void(-1);' onclick='parent.addTab(\"阅读："+row.title+"\",\"<%=cp%>/read/msginfo/"+row.id+"\")'>"+value+"</a>";
}
/* 删除更新按钮 */
function newsOpeation(value,row,index){
var a = '<a href="javascript:void(-1)" onclick="updatenews('+index+')">更新</a> ';
var b = ' <a href="javascript:void(-1)" onclick="deletenews('+index+')">删除</a>';
return a+b;
}
/* 新增新闻 */
function newAddNews(){
$('#w').window('setTitle','添加新闻');
$('#w').window('open');
$('#ff').form('clear');
editor.html("");
$('#ff').attr("action","<%=cp%>/news/addNews");
}
/* 更新新闻 */
function updatenews(index){
var row =$('#dg').datagrid('getRows')[index]; //获取行
if (row){
$('#w').window('setTitle','修改新闻');
$('#w').window('open');
$('#ff').form('clear');
$('#ff').form('load', '<%=cp%>/news/getNews/'+row.id);
$('#ff').attr("action",'<%=cp%>/news/updateNews?id='+row.id);
/* $('#u_title').html(row.title); */ //$('#u_title')[0].innerHTML = row.title;
editor.html(row.content);
//$('#news_type').combobox('setValue',row.newstype);
} else {
$.messager.show({
title:'警告',
msg:'请您先选择用户资料。'
});
}
}
/* 执行常规查询 */
function normalQuery(value){
$('#dg').datagrid("reload",{
title: value
});
}
/* 显示全部记录 */
function displayAll(){
$('#dg').datagrid("reload",{title:''});
}
//删除
function deletenews(index){
$.messager.confirm('提示','您是否确认执行删除操作？',function(r){
if (r){
var row = $('#dg').datagrid('getRows')[index];
if(row && row.id!=null){
$.post('<%=cp%>/news/delNews/'+row.id,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
//$.messager.show({title:'提示',msg:data.msg,timeout:2000,showType:'fade'});
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
}
});
}
/* 批量删除 */
function deleterow(){
var rows = $('#dg').datagrid('getSelections');
if(rows==null||rows.length<=0){
$.messager.alert('提示',"请先选择要删除的信息");return false;
}
$.messager.confirm('提示','确定要删除吗?',function(result){
if (result){
var ps = "";
$.each(rows,function(i,n){
if(i==0)
ps += "?id="+n.id;
else
ps += "&id="+n.id;
});
$.post('<%=cp%>/news/del'+ps,function(data){
eval("data="+data); //字符串转换成json对象
if(data.success){
$.messager.alert('提示',data.msg);
$('#dg').datagrid('reload');
}else{
$.messager.alert('错误',data.msg,'error');
}
});
}
});
}
/* 数据加载 */
function lookContent(index){
var row = $('#dg').datagrid('getRows')[index];
if (row){
$('#data_win').window('setTitle','新闻内容');
$('#look_content').html(row.content);
$('#data_win').window('open');
} else {
$.messager.show({
title:'警告',
msg:'请您先选择数据行。'
});
}
}
/* 打开附件窗口 */
function openAttach(){
$('#fltree').tree({
url:'<%=cp%>/file/fileTree',
animate : true,
checkbox:true,
onlyLeafCheck:true,
onLoadSuccess:function(node,data){
if(data==null || data.length==0){
$('#fltree').append('<li style="font-size:16px;margin-top:10px">暂无附件，请在"附件上传"模块上传。</li>');
}
}
});
$('#fileDialog').dialog('open');
}
function initDialog(){
$('#fileDialog').dialog({
closed:true,
buttons:[{
text:'确定',
handler:fileSubmit
},{
text:'取消',
handler:function(){
$('#fileDialog').dialog('close');
}
}]
});
}
var flid = [],flnms = [];
function fileSubmit(){
var nd = $('#fltree').tree('getChecked');
if(nd.length > 0){
for(var i = 0;i<nd.length;i++) {
flid[i] = nd[i].id;
flnms[i] = nd[i].text;
}
}else {
$.messager.alert('提示','请选择上传的文件','info');
}
if(flnms.length>0){
for(var i=0;i<flnms.length;i++){
var str="<span id='fl_"+i+"'>"+flnms[i]+"[<a href='javascript:void(-1)' onclick='filedel("+i+");'>删除<a>] </span>";
$('#file_tree').append(str);
}
$('#file_tree').show();
}
$('#fileDialog').dialog('close');
}
function filedel(index){
$("#fl_"+index).html("");
oaflcds.slice(index, 1);
oaflnms.slice(index, 1);
}
</script>
</head>
<body style="margin:0">
<table id="dg" class="easyui-datagrid" url="<%=cp%>/news/getAllNews" idField="id"
data-options="pageSize:20,pageList:[5,10,15,20],loadMsg:'正在加载....'"
pagination="true" rownumber="true" nowrap="true" striped="true" collapsible="true" remoteSort="false"
toolbar="#tb">
<thead>
<tr>
<th data-options="field:'id',checkbox:true"></th>
<th data-options="field:'title',width :300,sortable:true,align :'center',formatter:titleOpeation">标题</th>
<th data-options="field:'author',width :200,align :'center'">作者</th>
<th data-options="field:'content',width :200,hidden:true,align :'center'">内容</th>
<th data-options="field:'typename',width :200,align :'center'">新闻类型</th>
<th data-options="field:'date',width :200,sortable:true,align :'center'">日期</th>
<th data-options="field:'opition',width :200,align :'center',formatter:newsOpeation">操作</th>
</tr>
</thead>
</table>
<%-- 创建toolbar --%>
<div id="tb" style="height:35px;">
<div style="float:left;padding:4px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
</div>
<div style="padding:6px;">
<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
<span style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span>
</div>
</div>
<div id="data_win" class="easyui-window" closed="true" modal="true">
<div id="look_content" style="text-align:center; padding:1px;"></div>
</div>
<div id="fileDialog" class="easyui-dialog" title="选择上传文件"
data-options="width:300,
height:450,
modal:true,
minimizable:false,
maximizable:false,
collapsible:false,
closed:true, <!-- dialog不自动打开 -->
resizable:false">
<ul id="fltree"></ul>
</div>
<div id="w" class="easyui-window" data-options="iconCls:'icon-save',closed:true,modal:true">
<div style="text-align:center; padding:1px;">
<form id="ff" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>附件</td>
<td><a href ="javascript:openAttach();">附件上传</a></td>
</tr>
<tr id="file_tree" style="display:none;">
<td colspan="1" ></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="$('#ff').submit();" id="btn-ok" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="$('#w').window('close');" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
</body>
</html>
对第二种方法进行解析
1、在添加内容时，使用文本编辑器KindEditor插件，需要引入其包，但在使用kindeditor时，取不到textarea里面的值，此时需要同步，加入afterBlur:function(){this.sync();具体解析参照链接http://137694047.iteye.com/blog/2051315
2、数据的分页显示，用到了datagrid插件，每页要求显示多少行数据，datagrid中的属性可以配置，更多属性的配置可查看easyui的api，easyui API的链接：http://www.jeasyui.com/
<table id="dg" class="easyui-datagrid" url="<%=cp%>/news/getAllNews" idField="id" data-options="pageSize:20,pageList:[5,10,15,20],loadMsg:'正在加载....'" pagination="true" rownumber="true" nowrap="true" striped="true" collapsible="true" remoteSort="false" toolbar="#tb"> <thead> <tr> <th data-options="field:'id',checkbox:true"></th> <th data-options="field:'title',width :300,sortable:true,align :'center',formatter:titleOpeation">标题</th> <th data-options="field:'author',width :200,align :'center'">作者</th> <th data-options="field:'content',width :200,hidden:true,align :'center'">内容</th> <th data-options="field:'typename',width :200,align :'center'">新闻类型</th> <th data-options="field:'date',width :200,sortable:true,align :'center'">日期</th> <th data-options="field:'opition',width :200,align :'center',formatter:newsOpeation">操作</th> </tr> </thead> </table>
3、创建toolbar，实现添加、显示全部、批量删除、条件查找功能。
在创建这些按钮时，我遇到的问题，添加、显示全部、批量删除按钮添加到页面时，可垂直居中，当把搜索框添加上去后，搜索框不能垂直居中，搜索框的添加，破坏了页面的margin，整了一下午，勉强找到了个解决的办法，但个人觉得不太好，这里还没有找到更好方案，我的结局方案是，将添加、显示全部、批量删除按钮一个div中，并且style="float:left，搜索框放大另外一个div中。
具体代码：
<%-- 创建toolbar --%>
<div id="tb" style="height:35px;">
<div style="float:left;padding:4px;">
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" onclick="newAddNews();" plain="true">新增新闻</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" onclick="displayAll();" plain="true">显示全部</a>
<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" onclick="deleterow();" plain="true">删除</a>
</div>
<div style="padding:6px;">
<input id="q" class="easyui-searchbox" data-options="searcher:normalQuery,prompt:'按新闻标题'" style="width:200px;"></input>
<span style="color:#E10900;">（说明：双击数据行可查看新闻内容。）</span>
</div>
</div>
4、添加和更新公用一个window、form，两个功能只需写一个window、form即可，节省代码量
<div id="w" class="easyui-window" data-options="iconCls:'icon-save',closed:true,modal:true">
<div style="text-align:center; padding:1px;">
<form id="ff" method="post">
<table width="90%" cellspacing="1" cellpadding="2" border="0" align="center">
<tr>
<td>标题：</td>
<td><input type="text" name="title" size="50" class="easyui-validatebox" required="true" missingMessage="请填写标题" /></td>
</tr>
<tr>
<td>作者：</td>
<td><input type="text" name="author" class="easyui-validatebox" required="true" missingMessage="请填写作者名字" /></td>
</tr>
<tr>
<td>新闻类型：</td>
<td><input class="easyui-combobox" required="true" missingMessage="请给该新闻分类" id="newstype" name="newstype" data-options="url:'<%=cp%>/newstype/getTypeList',method:'get',textField:'name',valueField:'id',editable:false"/></td>
</tr>
<tr>
<td>日期：</td>
<td><select class="easyui-datetimebox easyui-validatebox" required="true" missingMessage="请添加新闻添加时间" id="date" name="date" style="width:150px"></select></td>
</tr>
<tr>
<td>附件</td>
<td><a href ="javascript:openAttach();">附件上传</a></td>
</tr>
<tr id="file_tree" style="display:none;">
<td colspan="1" ></td>
</tr>
<tr>
<td>内容：</td>
<td colspan="2"><textarea id="msg_content" name="content" style="width:100%;height:240px"></textarea></td>
<!-- <td colspan="3"><textarea name="content" cols="40" rows="15" style="width:100%;" ></textarea></td> -->
</tr>
</table>
</form>
</div>
<div style="text-align:center;padding:5px;">
<a href="javascript:void(0)" onclick="$('#ff').submit();" id="btn-ok" class="easyui-linkbutton" icon="icon-save">保存</a>
<a href="javascript:void(0)" onclick="$('#w').window('close');" id="btn-cancel" class="easyui-linkbutton" icon="icon-cancel">取消</a>
</div>
</div>
插件中功能的实现调用的方法看上面贴的详细代码
附加：
js中需要添加如下代码，来调整datagrid的自适应度，使其根据浏览器的大小变化而变化。
//设置datagrid的自适应度
window.onresize=function(){
$('#dg').datagrid('resize',{height:document.body.clientHeight});
}
不添加如上代码，会出现如下图片中的问题
分享到：
发表评论
相关推荐
在本项目"C# MVC4+EasyUI框架增删改查"中，我们主要探讨的是如何利用C#的ASP.NET MVC4框架与EasyUI前端库来实现一个基础的Web应用程序，其中包括对数据库的操作（增、删、改、查）。首先，我们要理解MVC模式，它是由...
描述中提到，这是作者个人学习MVC和EasyUI的心得体现，包含了使用这两个技术进行增删改查操作的具体实现。这暗示了项目包含完整的源代码和可能的文档，可供其他人参考学习，特别是对于那些刚开始接触ASP.NET MVC和...
【标题】"easyui+三层+json增删改查DEMO"是一个基于EasyUI前端框架，结合三层架构和JSON数据格式实现的Web应用程序示例，主要用于演示如何在实际项目中进行CRUD（创建、读取、更新、删除）操作。这个DEMO涵盖了...
Struts2是一个基于MVC（Model-View-Controller）架构的Java Web开发框架，它提供了一种组织应用程序逻辑的方式，使得前端和后端之间的交互更加清晰和高效。Struts2的核心是Action类，它负责接收请求、处理业务逻辑并...
这里，我们深入探讨一下使用jQuery EasyUI与SSH框架进行数据操作（增删改查）的基础知识。 jQuery EasyUI是一个基于jQuery的前端框架，它提供了一系列轻量级、易于使用的组件，如表格、对话框、菜单等，用于构建富...
在本项目中，EasyUI提供了诸如表格、表单、按钮、对话框等组件，用于实现用户界面的增删改查操作。 4. **MySQL** 和 **MSSQL**：这两种数据库管理系统分别代表开源的SQL数据库（MySQL）和微软的商业SQL数据库...
在IT行业中，数据库操作是日常开发中的重要环节，特别是对于Web应用来说，增删改查（CRUD）和分页查询是核心功能。本话题主要围绕"Java"环境下的"Spring"框架，结合"SpringMVC"、"MyBatis"以及"EasyUI"来实现这些...
通过上述步骤，我们已经成功实现了基于Struts2 和 EasyUI 的增删改查及分页排序功能。虽然过程中可能会遇到一些小问题，比如参数传递不正确、页面布局调整等，但只要保持耐心和细心，逐一排查问题所在，就能够顺利...
在【描述】中提到的“初步的EasyUI结合PHP的增删改查”，这通常指的是使用PHP作为后端处理数据，EasyUI作为前端展示，实现数据库中的数据的添加（Add）、删除（Delete）、修改（Update）和查询（Query）功能。...
开发者可以通过注解驱动的方式定义控制器，处理文件的增删改查操作，同时SpringMVC的依赖注入特性使得服务层和数据访问层的代码更加灵活和可维护。 系统实现的关键技术点包括： 1. **用户认证与授权**：通过Spring...
- **Form（表单）**: Form组件用于收集和验证用户输入，可以与Grid组件配合使用，实现数据的增删改查操作。文档会讲解表单元素的使用，如文本框、下拉框、复选框等，以及表单的验证规则。 2. **API接口** - 在`...
在实际开发中，你可能还需要考虑其他功能，如菜单的增删改查、权限控制等。总的来说，理解数据结构和EasyUI提供的API是成功生成菜单树的关键。希望这篇文章能帮助你理解和实现EasyUI的菜单树功能。
数据访问层则负责与数据库的交互，实现数据的增删改查。 在ASP.NET MVC4中，路由配置是关键部分，它定义了URL如何映射到控制器和操作。开发者可以自定义路由规则，以实现灵活的URL结构。此外，MVC4中的模型绑定功能...
Jeecg (J2EE Code Generation) 是一款基于代码生成器的智能开发框架，它能够自动生成单表和一对多表的增删改查功能，并且提供了统一的界面样式，极大地提高了开发效率。Jeecg的核心技术栈包括Struts2、Spring3、...
"订单增删改查"是任何管理系统的基础功能。增加订单意味着添加新的订单信息；删除订单则允许用户移除不再需要的记录；修改订单用于更新已存在的订单状态或信息；查询订单则是查找特定订单的关键功能，通常支持按多种...
利用这一点，你可以动态地加载项目计划数据，实现增删改查等功能。 3. **响应式设计**：为了确保在不同设备上都能良好显示，你需要考虑模板的响应式布局。EasyUI提供了一些内置的工具和方法，帮助你实现屏幕尺寸...
它通过映射机制将Java类与数据库表对应，自动处理数据的增删改查。 在这样一个环境中，开发者通常会按照以下步骤进行开发： 1. 使用Spring配置Bean，管理依赖，以及实现事务控制。 2. Struts2负责接收和转发请求，...
DataGrid 支持分页、排序、过滤、行选择、编辑等多种功能，并且可以与后台数据库进行交互，实现数据的增删改查。DataGrid 还支持自定义列、行模板，提供了一种灵活的方式来呈现复杂的数据结构。 在 "EasyUI的tree及...
- **数据操作**：利用EasyUI的API进行数据的增删改查操作，如`datagrid`组件的`loadData`方法。 通过深入学习和实践`EasyUI-tutorial(辅助文档).CHM`和`EasyUI-API-1.3.2.chm`中的内容，开发者可以更好地掌握EasyUI...
b、具有鲜花类别管理功能，对所有类别信息进行增删改查的管理操作。 c、具有鲜花信息管理功能，对所有鲜花信息进行增删改查的管理操作。 d、具有订单信息管理功能，对所有订单信息进行查看、受理和删除的管理操作。...