如何在jQuery datagrid中添加输入框，只需要在toolbar中添加<input>如下
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery EasyUI</title>
<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../themes/icon.css">
<script type="text/javascript" src="../jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../jquery.easyui.min.js"></script>
<script>
$(function(){
$('#test').datagrid({
title:'TestDataGrid',//列表名
iconCls:'icon-save',
width:600,
height:350,
nowrap: false,
striped: true,
collapsible:true,
url:'datagrid_data.json', //所连的Action名
sortName: 'code',
sortOrder: 'desc',
remoteSort: false,
idField:'code',
frozenColumns:[[
{field:'ck',checkbox:true},
{title:'序列',field:'code',width:80,sortable:true}
]],
columns:[[
{title:'内容',colspan:3},
{field:'opt',title:'操作',width:100,align:'center', rowspan:2,
formatter:function(value,rec){
return '<span style="color:red">编辑 删除e</span>';
}
}
],[
{field:'writer',title:'姓名',width:120},
{field:'addr',title:'住址',width:120,rowspan:2,sortable:true,
sorter:function(a,b){
return (a>b?1:-1);
}
},
{field:'content',title:'说说',width:150,rowspan:2}
]],
pagination:true,
rownumbers:true,
toolbar:[{
text: '输入框1<input type="text" id="userAccount"/>输入框2<input type="text" id="identityNum"/>'
}, {
text: '输入框3<input type="text" id="username"/>'
}, {
id: 'btnAddPeopleSetId',
text: '这是toolbar输入框',
iconCls: 'icon-add',
handler: function(){
inputToobar();
}
}]
});
var p = $('#test').datagrid('getPager');
if (p){
$(p).pagination({
onBeforeRefresh:function(){
alert('before refresh');
}
});
}
});
</script>
</head>
<body>
<h1>DataGrid</h1>
<table id="test"></table>
</body>
</html>
分享到：
相关推荐
在这个"EasyUI DataGrid 过滤用法实例"中，我们将深入探讨如何利用 EasyUI 的 DataGrid 组件实现数据过滤功能，帮助用户更高效地查找和管理表格中的信息。 首先，`datagrid-filter.js` 文件很可能包含了实现过滤...
在Web应用开发中，数据展示和交互是核心部分之一，而DataGrid作为数据展示的利器，深受开发者喜爱。JeasyUI DataGrid是一款基于jQuery的轻量级组件，它为开发者提供了丰富的功能，如数据分页、排序、过滤等，极大地...
在本文中，我们将深入探讨如何在EasyUI框架中实现`dataGrid`的重画功能，特别是在自定义搜索框和调整默认按钮大小方面。EasyUI是一个基于jQuery的UI库，提供了丰富的组件，包括`dataGrid`，它是一个强大的数据展示...
最后，通过对combogrid在正常情况下生成的CSS类进行观察，发现编辑器中combogrid对应的输入框的类是"datagrid-editable-input combogrid-f combo-f"。利用这个信息，我们可以使用CSS类选择器来定位到对应的combogrid...
在本文中，我们将深入探讨如何使用JQuery EasyUI与jQuery SearchBox插件在DataGrid中添加搜索功能。JQuery EasyUI是一个基于JQuery的轻量级框架，它提供了一组丰富的用户界面组件，如DataGrid、Dialog、Form等，极大...
EasyUI的DataGrid是一款强大的JavaScript组件，用于在Web页面中展示结构化的数据，它提供了丰富的功能，如分页、排序、筛选、编辑等。在本文中，我们将深入探讨如何将数据绑定到EasyUI的DataGrid中，以及在这个过程...
在本篇文章中，我们将深入探讨如何在实际应用中实现 jQuery EasyUI DataGrid 的分页操作。 首先，DataGrid 分页操作的核心在于向服务器请求数据时指定分页参数，然后服务器根据这些参数返回对应页码的数据。在给定...
DataGrid 允许用户自定义工具栏，通过 `toolbar` 属性可以添加工具栏按钮。工具栏按钮可以自定义文本、图标、以及点击时触发的事件处理函数。例如，在示例代码中，工具栏包含了“刷新”、“添加”、“编辑”、“删除...
在本章中，我们将深入探讨EasyUI中的DataGrid（数据表格）组件，这是一个非常重要的UI控件，常用于展示和管理大量结构化数据。DataGrid不仅继承了Panel（面板）的一些基本特性，还集成了Resizeable（可调整大小）、...
该函数通过jQuery选择器获取输入框中的查询条件，并调用datagrid组件的`load`方法进行数据加载，将查询条件作为参数传递给后端接口。 ### easyui datagrid组件的配置选项 在`<table>`标签的属性中，可以看到easyui...
<table id="datagrid" class="easyui-datagrid" toolbar="#toolbar"> <!-- 表头列定义 --> ``` 4. **绑定事件**：虽然工具栏的创建不需要 JavaScript 代码，但为了实现按钮的功能，我们需要监听按钮点击...
DataGrid 还支持各种其他属性，如 `toolbar` 用于添加工具栏，`rownumbers` 显示行号，`fitColumns` 自动调整列宽，以及 `singleSelect` 允许单选行。 工具栏上的按钮（如 "New User"、"Edit User" 和 "Remove User...
6. 树形控件（Tree）和下拉树（Combotree）：Tree 可以展示层级结构的数据，而 Combotree 是 Tree 和下拉列表的结合，可以在输入框中选择或搜索树形结构的数据。 7. 下拉列表（Combobox）：Combobox 是一个组合...
在这个压缩包中，"jQueryEasyUI" 文件很可能是EasyUI的核心库，包含所有必要的JavaScript和CSS资源。 EasyUI 的核心功能包括但不限于： 1. **布局组件**：如面板（Panel）、窗口（Window）、对话框（Dialog）等，...
4. **菜单和工具栏**：菜单（menu）和工具栏（toolbar）提供了用户操作的入口，可以方便地添加各种按钮和下拉菜单，实现命令的触发。 5. **数据处理**：EasyUI支持AJAX和JSON数据格式，可以方便地与后台进行数据...
1. 添加学生信息：用户在输入框中填写学生的基本信息，如姓名、学号、性别、出生日期等，点击“添加”按钮，系统会通过ADO（ActiveX Data Objects）连接数据库，执行INSERT语句将数据插入到学生表中。 2. 查询学生...
2. **表单组件**：表单在Web应用中扮演重要角色，EasyUI提供了诸如文本输入框（textbox）、下拉选择框（combobox）、日期选择器（datebox）等，使表单设计更为简便。 3. **数据网格（datagrid）**：数据网格是用于...
1. **基本使用**：EasyUI 的使用通常从引入 CSS 和 JS 文件开始，然后在 HTML 中添加特定的类名来激活组件。例如，要创建一个基本的按钮，只需在 `<button>` 标签中加入 `class="easyui-button"`。 2. **布局组件**...