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 ...
随机推荐
- 模块化&os&sys
syspath python 使用import模块调用的优先级是根据sys.path路径来的,此变量中位置在列表中的先后顺序来调用,如果先找到对应的模块,则先调用此模块. import sys pri ...
- learning at command AT+CSQ
AT command AT+CSQ [Purpose] Learning how to get mobile module single quality report [Eeviro ...
- Python之路-python基础二
本章内容: 一.编码格式 二.常用数据类型 三.字符串常用方法 四.列表常用方法 五.数据运算 六.课后作业 编码格式: ASCII A ...
- MicroBlaze核的串行接口实验：SPI UART
reference : https://blog.csdn.net/weixin_42413559/article/details/80720566 串行接口:SPI UART XPS->SDK ...
- centos7中docker操作
docker部署nginx 1. 下载nginx [root@localhost my.Shells]# docker images REPOSITORY TAG IMAGE ID CREATED S ...
- Sass 混合宏、继承、占位符 详解
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- day 42 mysql 数据类型
mysql 数据类型 数据类型 truncate t1 (删除表) # 无符号类型 alter table t1 modify id tinyint unsigned (表里有值,不能直接改) d ...
- day 20 collection模块 time 模块 os 模块
一.collection模块 1.namedtuple: 生成可以使用名字来访问元素内容的tuple 2.deque: 双端队列,可以快速的从另外一侧追加和推出对象 3.Counter: 计数器,主要 ...
- web 架构 /http协议，状态码，django中常用命令
什么是web应用? web应用 架构 :B/S架构 | C/S架构 网站:BS架构其实就是应用程序: B是浏览器 S是sever(实现了wsgi协议,实现了socket的服务端) + applicat ...
- kbmMWUnidac直接SQLServer
UniDAC支持SQLServer直联了,当时就测试过在kbmMW中用直联方式,结果不尽人意,kbmMWServer在执行sql时会出地址错误,就一直没有进一步测试.今天听xalion说,是因为当直联 ...