EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="http://www.jeasyui.net/Public/js/easyui/themes/icon.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/layer/3.1.0/layer.js"></script>
</head>
<body>
<style type="text/css">
#fm { } .ftitle {
font-size: 14px;
font-weight: bold;
padding: 5px ;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
} .fitem {
margin-bottom: 10px;
} .fitem label {
display: inline-block;
text-align: right;
width: 80px;
font-size: 13px;
padding-right: 10px;
} .fitem input {
width: 160px;
}
</style> <table id="list" class="easyui-datagrid" style="width: auto; height: 350px;" toolbar="#dlg-toolbar"></table> <div id="dlg-toolbar">
<table cellpadding="" cellspacing="" style="width:100%">
<tr> <td style="text-align:left">
<input></input><a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true"></a>
</td>
</tr>
<tr>
<td>
<a href="#" class="easyui-linkbutton" iconCls="icon-add" id="add" plain="true">Add</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-edit" id="edit" plain="true">Edit</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-clear" plain="true">Delete</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-help" plain="true">Help</a>
</td>
</tr>
</table>
</div> <div id="dd" class="easyui-dialog" title="My Dialog" style="width:350px;height:290px;"
data-options="iconCls:'icon-save',resizable:true,modal:true,closed:true" buttons="#dlg-buttons">
<form id="form" method="post" style="margin-top: 20px; margin-left: 20px;">
<div class="fitem" >
<label>商品编号:</label>
<input id="itemid" name="itemid" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>用户名:</label>
<input id="productid" name="productid" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>姓名:</label>
<input id="listprice" name="listprice" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>操作1:</label>
<input id="unitcost" name="unitcost" data-options="required:true,min:0,precision:5" style="" class="easyui-numberbox" editable="true" />
</div>
<div class="fitem" >
<label>操作2:</label>
<input id="attr1" name="attr1" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
<div class="fitem" >
<label>操作3:</label>
<input id="status" name="status" data-options="required:true" style="" class="easyui-textbox" editable="true" />
</div>
</form>
</div> <div id="dlg-buttons">
<table cellpadding="" cellspacing="" style="width:100%">
<tr>
<td style="text-align:right">
<a href="#" class="easyui-linkbutton" iconCls="icon-save" id='btnSave'>Save</a>
<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dd').dialog('close')">Close</a>
</td>
</tr>
</table>
</div> </body>
<script> $("#list").datagrid({
iconCls: "icon-add",
fitColumns: false,
loadMsg: "数据加载中......",
data:[ { "productid": "K9-DL-01", "unitcost": , "status": "P", "listprice": , "attr1": "Spotted Adult Female", "itemid": "EST-10" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Venomless", "itemid": "EST-11" }, { "productid": "RP-SN-01", "unitcost": , "status": "P", "listprice": , "attr1": "Rattleless", "itemid": "EST-12" }, { "productid": "RP-LI-02", "unitcost": , "status": "P", "listprice": , "attr1": "Green Adult", "itemid": "EST-13" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "Tailless", "itemid": "EST-14" }, { "productid": "FL-DSH-01", "unitcost": , "status": "P", "listprice": , "attr1": "With tail", "itemid": "EST-15" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Female", "itemid": "EST-16" }, { "productid": "FL-DLH-02", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-17" }, { "productid": "AV-CB-01", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-18" }, { "productid": "AV-CB-03", "unitcost": , "status": "P", "listprice": , "attr1": "Adult Male", "itemid": "EST-134" }] ,
pagination: true,
rownumbers: true,
nowrap: false,
showFooter: true,
singleSelect: true, columns: [[
{
field: 'itemid', title: '编号', width: , align: 'center',
formatter: function (value, row, index) {
return " <a href='javascript:void(0)' onclick='return LoadUserInfo()'>" + value + "</a>";
}
},
{
field: 'productid', title: '用户名', width: , align: 'center',
},
{
field: 'listprice', title: '姓名', width: , align: 'center',
},
{
field: 'unitcost', title: '操作1', width: , align: 'center',
},
{
field: 'attr1', title: '操作2', width: , align: 'center',
},
{
field: 'status', title: '操作3', width: , align: 'center',
}
]] })
$(function () {
$("#add").click(function(){
$('#dd').dialog({title:'创建'}).dialog('open');
$('#itemid').textbox("setValue",'');
$('#productid').textbox("setValue",'');
$('#listprice').textbox("setValue", '');
$('#unitcost').textbox("setValue", '');
$('#attr1').textbox("setValue", '');
$('#status').textbox("setValue", '');
});
$("#edit").click(function(){
var row = $("#list").datagrid("getSelected");
if(row==null){
layer.msg('没有选中记录', { icon: });
return;
}
$('#dd').dialog({title:'修改'}).dialog('open');
$('#itemid').textbox("setValue",row.itemid);
$('#productid').textbox("setValue", row.productid);
$('#listprice').textbox("setValue", row.listprice);
$('#unitcost').textbox("setValue", row.unitcost);
$('#attr1').textbox("setValue", row.attr1);
$('#status').textbox("setValue", row.status);
});
$("#delete").click(function(){ });
$("#btnSave").click(function () {
if ($('#form').form('validate')) {
$.ajax({
type: 'post',
url: '',
data: $("#form").serialize(),
success: function (result) {
if (result == "True") {
$('#dlg').dialog('close')
$('#list').datagrid('load', { })
layer.msg('保存成功', { icon: });
}
else {
layer.alert("保存失败");
}
}
});
}
});
});
</script>
</html>
EasyUI datagrid easyui datagrid +dialog 加载 可直接运行 七的更多相关文章
- 雷林鹏分享：jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点
jQuery EasyUI 树形菜单 - 树形菜单加载父/子节点 通常表示一个树节点的方式就是在每一个节点存储一个 parentid. 这个也被称为邻接列表模型. 直接加载这些数据到树形菜单(Tree ...
- easyUI slider滑块，在加载出来后，easyUI slider滑块禁用方法
easyUI slider滑块禁用 如下图easyUI slider滑块,在加载出来后,需要禁止拉动 easyUI slider滑块禁用方法 //禁用$(s1).slider({ disabled:t ...
- DataGrid 的DataSource重新加载数据
DataGrid 的DataSource重新加载数据,若直接重新给DataSource赋值是没有效果的,若只是修改原有数据中的单个值,此方法有效,但是针对完全不一样的数据直接重新赋值的方式是无效的,此 ...
- html加载与脚本运行中，由于html未完全加载而导致脚本找不到dom元素无法执行事件
问题: 如题,就是说alert后出现一个对话框,我没有点关闭,其他js文件或html会被加载吗,我遇到一个问题就是在页面加载时调用一个div的click事件,却没有被执行,但是在调用事件前面加上ale ...
- 此编译单元不包含在frame元数据中指定的factoryClass，无法加载配置的运行时共享库
警告:此编译单元不包含在frame元数据中指定的factoryClass,无法加载配置的运行时共享库.要在没有运行时共享库的情况下进行编译,请将 -static-link-runtime-shared ...
- PHP+MySQL+Easyui tree菜单从后台加载json数据(一)
实现功能:从数据库加载出所有的数据库名,相应的数据库加载对应的数据库表名 原理:(首先看一下参考手册的内容) 异步加载Tree tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个 ...
- EasyUI的treegrid组件动态加载数据问题的解决办法
http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...
- EasyUi 分页 和 表格数据加载
这里说明的是将说有数据先返回到前端再由前端去分页,性能可能没有先在后台分好页再返回给前端高 但如果操作不涉及大数据的话也没什么大问题,具体问题具体分析 要使用分页控件首先要声明初始化一下: //设置分 ...
- EasyUI ComboTree无限层级异步加载示例
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="EasuUIDemoTree.a ...
随机推荐
- Java Web(十一) 文件上传与下载
文件上传 上传的准备工作 表单method必须为post 提供file组件 设置form标签的enctype属性为multipart/form-data,如果没有设置enctype属性,浏览器是无法将 ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- jquery checkbox的使用
获取单个checkbox选中的写法: $('input:checkbox:checked').val(); $("input:[type='checkbox']:checked") ...
- ROM、PROM、EPROM、EEPROM、FLASH ROM、FLASH、eMMC
ROM(Read Only Memory,只读存储器)芯片:在微机的发展初期,BIOS都存放在ROM芯片中.ROM内部的资料是在ROM的制造工序中,在工厂里用特殊的方法被烧录进去的,其中的内容只能读不 ...
- 使用DDMS查看设备内的文件系统
system文件系统存储了一些系统相关的文件 system/app里面是系统自带的应用程序 system/fonts里面存放的是系统自带的字体 system/frameworks里面存放的是系统的一些 ...
- 初始JSP
什么是JSP 1.JSP(Java Server Pages):在HTML中嵌入Java脚本代码 静态内容是JSP页面中的静态文本,其基本是HTML文本,与Java和JSP语法无关. 例子: 运行结果 ...
- (Java学习笔记) Java Threading (Java线程)
Java Threading (Java线程) ● Process & Thread Processes are the abstraction of running programs: A ...
- pytorch加载和保存模型
在模型完成训练后,我们需要将训练好的模型保存为一个文件供测试使用,或者因为一些原因我们需要继续之前的状态训练之前保存的模型,那么如何在PyTorch中保存和恢复模型呢? 方法一(推荐): 第一种方法也 ...
- ：命令模式：Command
#ifndef __COMMAND_H__ #define __COMMAND_H__ #include <vector> #include "Equipment.h" ...
- jdk8-全新时间和日期api
1.jdk8日期和时间api是线程安全的 1.java.time 处理日期时间 2.java.time.temporal: 时间校正器.获取每个月第一天,周几等等 3.java.time.forma ...