jquery easyui datagrid使用参考(增删改查1)

最新推荐文章于 2022-05-11 23:21:07 发布

吴生_

最新推荐文章于 2022-05-11 23:21:07 发布

阅读量1.6k

点赞数

分类专栏： web 文章标签： easyui

本文链接：https://blog.csdn.net/light1324/article/details/45770085

版权

web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>xxx</title>
<%@ include file="/taglibs.jsp"%>
<link rel="stylesheet" type="text/css" href="${ctx}/static/themes/icon.css">
<script type="text/javascript" src="${ctx}/static/jquery/jquery.form.js"></script>
<script language="JavaScript">
//文件上传
$(document).ready(function(){
var validateForm = function() { };
var showResponse = function(data,status) {
$("#imageUrl").textbox('setValue',data.responseText);
$('#uploadfiel').window('close');
};
var options={
// target : '#upMessage',
url : "uploadfile",
dataType: 'json',
beforeSubmit: validateForm,
success : showResponse,
error:function(data){
$("#imageUrl").textbox('setValue',data.responseText);
$('#uploadfiel').window('close');
},
resetForm:true
};
$('#uploadForm').ajaxForm(options);
});
</script>


<script type="text/javascript">
var url;
//新增
function add(){
$("#add").dialog("open").dialog('setTitle', '新增'); ;
$("#addform").form("clear");
url = "add";
document.getElementById("hidtype").value="submit";
}
//编辑
function edit(){
var row = $('#dg').datagrid('getSelected');
if(row){
row.startTime = getLocalTime(row.startTime);
row.endTime = getLocalTime(row.endTime);
row.insertTime = getLocalTime(row.insertTime);
$("#add").dialog("open").dialog('setTitle', '编辑');
$("#addform").form("load", row);
url = "add?id=" + row.id;
}
}
//保存
function savebrand(){
$("#addform").form("submit", {
url: url,
onsubmit: function () {
return $(this).form("validate");
},
success: function (result) {
if (result == "1") {
$.messager.alert("提示信息", "操作成功");
$("#add").dialog("close");
$("#dg").datagrid("load");
}
else {
//$.messager.alert("提示信息", "操作失败");
$("#add").dialog("close");
$("#dg").datagrid("load");
}
}
});
}

//删除
function destroybrand() {
var row = $('#dg').datagrid('getSelected');
if (row) {
$.messager.confirm('提示', '确定删除选中的记录?', function (r) {
if (r) {
$.post('destroybrand', { id: row.id }, function (result) {
if (result.success) {
$('#dg').datagrid('reload');
} else {
$.messager.show({
title: 'Error',
msg: ''
});
}
}, 'json');
}
});
}
}
//查询
function query() {
$('#dg').datagrid('reload',{
'name': $("#brandname").val(),
'price': $("#price").val()
});
}
//重置
function reset() {
$("#queryform").form("clear");
}

//上传文件窗口
function openupload(){
var win = $('#uploadfiel');
win.window('open');
}

//格式化时间戳
function getLocalTime(nS) {
var nsdate = new Date(nS);
var year=nsdate.getFullYear();
var month=nsdate.getMonth()+1;
var date=nsdate.getDate();
var hour=nsdate.getHours();
var minute=nsdate.getMinutes();
var second=nsdate.getSeconds();
return month+"/"+date+"/"+year+" "+hour+":"+minute+":"+second;
}

</script>

</head>

<body class="easyui-layout">

<div class="easyui-panel" title="查询" >
<div title="查询淘宝客商品" style="padding:10px;">
<form id="queryform" name="form" method="post" style="margin: 0px auto; text-align: center;padding: 10px;">
<table width="100%" style="border:0px;">
<tr >
<td style="width:25%;text-align:right;">名称:</td>
<td style="width:25%;text-align:left;"><input class="easyui-validatebox" type="text" id="brandname" name="name" /> </td>
<td style="width:25%;text-align:right;">价格:</td>
<td style="width:25%;text-align:left;">
<input class="easyui-validatebox" type="text" id="price" name="price" /> </td>
</tr>
</table>
<table width="100%" style="border:0px;">
<tr>
<td style="text-align:center;">
<a href="javascript:void(0)" class="easyui-linkbutton l-btn" οnclick="query()" group="" id=""><span class="l-btn-left"><span class="l-btn-text">查询</span></span></a>
<a href="javascript:void(0)" class="easyui-linkbutton l-btn" οnclick="reset()" group="" id=""><span class="l-btn-left"><span class="l-btn-text">重置</span></span></a>
</td>
</tr>
</table>
</form>
</div>
</div>


<table id="dg" title="品牌列表" class="easyui-datagrid" style=" height: 80%"
url="./read" toolbar="#toolbar" pagination="true" rownumbers="false"
fitcolumns="true" singleselect="true">
<thead>
<tr>
<th field="ck" checkbox="true" width="50">
<th field="id" width="50">
id
</th>
<th field="name" width="50">
名称
</th>
<th field="imageUrl" width="50" data-options="formatter:function(value,row,index){
return '<img width=80 src='+value+' />'}">

图像
</th>
<th field="price" width="50">
原始价格
</th>
<th field="discount" width="50" data-options="sortable:true">
折扣
</th>
<th field="status" width="50" >
状态
</th>
<th field="startTime" width="50"
data-options="
formatter:function(value,row,index){
var date = new Date(value);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
}">
开始时间
</th>
<th field="endTime" width="50"
data-options="
formatter:function(value,row,index){
var date = new Date(value);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
}">
结束时间
</th>
</tr>
</thead>
</table>


<div id="toolbar">
<a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-add" οnclick="add()"
plain="true">新增</a> <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit"
οnclick="edit()" plain="true">编辑</a> <a href="javascript:void(0)" class="easyui-linkbutton"
iconcls="icon-remove" plain="true" οnclick="destroybrand()">删除</a>
</div>


<div id="add" class="easyui-dialog" closed="true" buttons="#dlg-buttons" data-options="closed:true,modal:true" style="width:700px;height:400px;padding:5px;">
<div class="ftitle">
信息编辑
</div>
<form id="addform" name="form" method="post" style="margin: 0px auto; text-align: center;padding: 10px;" >
<table width="100%" style="border:0px;" cellpadding="5">
<tr>
<td>品牌:</td>
<td><input class="easyui-textbox" type="text" id="name" name="name" data-options="required:true"></input></td>
<td>价格:</td>
<td><input class="easyui-textbox" type="text" name="price" data-options="required:true"></input></td>
</tr>
<tr>
<td>图片地址:</td>
<td><input textboxname="imageUrl" comboname="imageUrl" class="easyui-textbox" type="text" id="imageUrl" name="imageUrl" data-options="required:true"></input></td>
<td>
<a href="#" class="easyui-linkbutton" οnclick="openupload()">上传图片</a>
</td>

</tr>
<tr>
<td>折扣:</td>
<td><input class="easyui-textbox" name="discount" data-options="multiline:true" ></input></td>
<td>状态:</td>
<td>
<select class="easyui-combobox" data-options="editable:false" name="status" style="width:170px;">
<option value="0">A</option><option value="1">B</option>
</select>
</td>
</tr>
<tr>
<td>开始时间:</td>
<td>
<input class="easyui-datebox" name="startTime"></input>
</td>
<td>结束时间:</td>
<td>
<input class="easyui-datebox" name="endTime"></input>
</td>
</tr>
<tr>
<td>所属分类:</td>
<td>
<select class="easyui-combobox" data-options="editable:false" name="classifyId" id="classifyId" style="width:170px;" >
<option value="1001">AAA</option><option value="1002">BBB</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="action" id="hidtype" />
</form>
</div>
<div id="dlg-buttons">
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="savebrand()" iconcls="icon-save">保存</a>
<a href="javascript:void(0)" class="easyui-linkbutton" οnclick="javascript:$('#add').dialog('close')"
iconcls="icon-cancel">取消</a>
</div>


<div id="uploadfiel" class="easyui-window" data-options="closed:true,modal:true,title:'上传图片'" style="width:500px;height:200px;padding:5px;">
<div class="easyui-layout" data-options="fit:true">
<form id="uploadForm" name="form" method="post" enctype="multipart/form-data" style="margin: 0px auto; text-align: center;padding: 10px;" >
<table width="100%" style="border:0px;" cellpadding="5">
<tr>
<td>上传图片:</td>
<td>
<div style="margin-bottom:20px">
<input class="easyui-filebox" name="file" >
</div>
</td>
</tr>
</table>
<input type="submit" value="提交">
</form>
</div>
</div>

<div style="height:50px;" align="center">
<label>
作者：jimi<br/>
时间：2015
</label>
</div>
</body>
</html>

吴生_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery easyui datagrid使用参考(增删改查1)

xxx//文件上传$(document).ready(function(){ var validateForm = function() { }; var showResponse = function(data,status) { $("#imageUrl").textbox('setValue',data.responseText);
复制链接

扫一扫